bootstrap褪色的旋转木马急剧改变图像，而不是过渡

我正在尝试改变Bootstrap 4旋转木马的正常行为。我不希望它会淡入图像和进度。在经过许多搜索结果和代码的迭代之后，我设法使其正常工作，但是图像不会逐渐消失。相反，它们发生了巨大变化。

codepen：https：//codepen.io/anon/pen/rlpmyv

html

<div class="container-fluid">
    <div class="carousel carousel-fade" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <img class="img-fluid d-block" src="http://wallpaperscraft.com/image/cat_muzzle_striped_sleep_29421_300x400.jpg" alt="Cat 1">
            </div>
            <div class="carousel-item">
                <img class="img-fluid d-block" src="https://wallpaperscraft.com/image/cat_grass_eyes_lying_spotted_striped_29443_300x400.jpg" alt="Cat 2">
            </div>
            <div class="carousel-item">
                <img class="img-fluid d-block" src="https://wallpaperscraft.com/image/cat_face_color_furry_blue_eyes_cute_53075_300x400.jpg" alt="Cat 3">
            </div>
        </div>
    </div>
</div>

CSS

.carousel-fade {
    .carousel-item {
        display: block;
        position: absolute;
        opacity: 0;
        transition: opacity .75s ease-in-out !important;
        -webkit-transition: opacity .75s ease-in-out;
        -moz-transition: opacity .75s ease-in-out;
        -ms-transition: opacity .75s ease-in-out;
        -o-transition: opacity .75s ease-in-out;
        &.active {
            opacity: 1;
        }
    }
}

您认为我可能会缺少什么？

希望您对此感到满意。它是JavaScript和CSS。c/o css技巧css技巧https://css-tricks.com/snippets/jquery/simple-auto-auto-playing-slideshow/

 <!doctype html>
 <html>
 <head>
 <title></title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <style type="text/css">
 #slideshow {
 position: relative;
 width: 100%;
 height: 100%;
 }
 #slideshow > div {
 position: absolute;
 top: 10px;
 left: 10px;
 right: 10px;
 bottom: 10px;
 }
 </style>
 <script>
 $("#slideshow > div:gt(0)").hide();
 setInterval(function() {
 $('#slideshow > div:first')
 .fadeOut(1000)
 .next()
 .fadeIn(1000)
 .end()
 .appendTo('#slideshow');
 }, 6000);
 </script>
 </head>
 <body>
 <div id="slideshow">
     <div>
         <img class="img-responsive" width="100%" src="http://wallpaperscraft.com/image/cat_muzzle_striped_sleep_29421_300x400.jpg" alt="Cat 1">
     </div>
     <div>
        <img class="img-responsive" width="100%" src="https://wallpaperscraft.com/image/cat_grass_eyes_lying_spotted_striped_29443_300x400.jpg" alt="Cat 2">
     </div>
     <div>
        <img class="img-responsive" width="100%" src="https://wallpaperscraft.com/image/cat_face_color_furry_blue_eyes_cute_53075_300x400.jpg" alt="Cat 3">
     </div>
 </div>
 </body>
 </html>

我去了这里https://codepen.io/redfrost/pen/qwwmwb。进行了一些调整以得出以下代码。您可以根据需要添加或删除一些东西

 <!doctype html>
 <html>
 <head>
 <title></title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <style>
 /* Carousel Fading slide */
 .carousel-fade .carousel-control { z-index: 2; }  
 .carousel-fade .item {
 opacity: 0;
 -webkit-transition-property: opacity;
 -moz-transition-property: opacity;
 -o-transition-property: opacity;
 transition-property: opacity;
 }
 .carousel-fade .item.active { opacity: 1; }
 .carousel-fade .active.left,
 .carousel-fade .active.right {
 left: 0;
 opacity: 0;
 z-index: 1;
 }

 /* Safari Fix */
 @media all and (transform-3d), (-webkit-transform-3d) {
 .carousel-fade .carousel-inner > .item.next,
 .carousel-fade .carousel-inner > .item.active.right {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
 }
 .carousel-fade .carousel-inner > .item.prev,
 .carousel-fade .carousel-inner > .item.active.left {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
 }
 .carousel-fade .carousel-inner > .item.next.left,
 .carousel-fade .carousel-inner > .item.prev.right,
 .carousel-fade .carousel-inner > .item.active {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
     }
 }
 /* Animation */
 .carousel-indicators li {
 -webkit-transition: all 250ms ease;
 -moz-transition: all 250ms ease;
 -ms-transition: all 250ms ease;
 -o-transition: all 250ms ease;
 transition: all 250ms ease;   
 /* hardware acceleration causes Bootstrap carousel controlbox margin error in webkit */
 /* Assigning animation to indicator li will make slides flicker */
 }
 /* Carouse Indicator */
 .carousel-indicators li.active,
 .carousel-indicators li { border: 0; }
 .carousel-indicators li {
 background: #666;
 margin: 0 3px;
 width: 12px;
 height: 12px;
 }
 .carousel-indicators li.active {
  background: #fff;
  margin: 0 3px;
 }
 </style>
 <script>
 // Carousel Auto-Cycle
  $(document).ready(function() {
 $('.carousel').carousel({
  interval: 5000
   })
 });
 </script>
 </head>
 <body>
 <section class="main-slider">
    <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">

 <!-- Indicators -->
 <ol class="carousel-indicators">
  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  <li data-target="#myCarousel" data-slide-to="1"></li>
  <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol>

 <!-- Carousel items -->
 <div class="carousel-inner">
  <!-- Slide 1 : Active -->
  <div class="item active">
    <img class="img-responsive" width="100%" src="http://wallpaperscraft.com/image/cat_muzzle_striped_sleep_29421_300x400.jpg" alt="Cat 1">
  </div><!-- /Slide1 -->
  <!-- Slide 2 -->
  <div class="item ">
    <img class="img-responsive" width="100%" src="https://wallpaperscraft.com/image/cat_grass_eyes_lying_spotted_striped_29443_300x400.jpg" alt="Cat 2">
  </div><!-- /Slide2 -->
  <!-- Slide 3 -->
  <div class="item ">
    <img class="img-responsive" width="100%" src="https://wallpaperscraft.com/image/cat_face_color_furry_blue_eyes_cute_53075_300x400.jpg" alt="Cat 3">
  </div><!-- /Slide3 -->
 </div><!-- /.carousel-inner -->

 <!-- Controls -->
 <div class="control-box">
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="control-icon prev fa fa-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="control-icon next fa fa-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
 </div><!-- /.control-box -->

 </div><!-- /#myCarousel -->
 </section><!-- /.main-slider -->
 </body>
 </html>

相关内容

最新更新

热门标签：