Bootstrap淡入淡出旋转木马会急剧改变图像而不是过渡

时间：2017-09-15 23:01:21

标签： html css twitter-bootstrap

我正在尝试改变Bootstrap 4的Carousel的正常行为。而不是滑动我想让它淡出和淡入图像。经过许多搜索结果和代码的迭代后，我设法让它工作，但图像不会淡入淡出。相反，他们会发生急剧变化。

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;
        }
    }
}

您认为我可能会错过什么？

2 个答案:

答案 0 :(得分：0)

我去了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>

答案 1 :(得分：0)

希望你对这个感到满意。它是javascript和css。 c / o CSS欺骗CSS技巧https://css-tricks.com/snippets/jquery/simple-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>
相关问题
最新问题