更改Slit Slider修改效果为淡入淡出 - Change Slit Slider Revised effect to fadein fadeout

Change Slit Slider Revised effect to fadein fadeout

我正在编写一个网站，该网站需要带有内容和下一个先前导航的全屏淡入淡出滑块。所以我找到了这个。

但主要的问题是，我需要这种效果来淡入淡出。

您可以使用引导程序转盘

http://getbootstrap.com/javascript/#carousel

自动生成帮助

http://www.bootply.com/64693

我用这把小提琴为你做一件事http://jsfiddle.net/fj75wqwc/

以下内容相同：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
  <style>
    .carousel.carousel-fade .item {
      -webkit-transition: opacity 0.5s ease-in-out;
      -moz-transition: opacity 0.5s ease-in-out;
      -ms-transition: opacity 0.5s ease-in-out;
      -o-transition: opacity 0.5s ease-in-out;
      transition: opacity 0.5s ease-in-out;
      opacity: 0;
    }
    .carousel.carousel-fade .active.item {
      opacity: 1;
    }
    .carousel.carousel-fade .active.left,
    .carousel.carousel-fade .active.right {
      left: 0;
      z-index: 2;
      opacity: 0;
      filter: alpha(opacity=0);
    }
    .carousel.carousel-fade .next,
    .carousel.carousel-fade .prev {
      left: 0;
      z-index: 1;
    }
    .carousel.carousel-fade .carousel-control {
      z-index: 3;
    }
  </style>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="page-header text-center">
        <h1>Bootstrap Carousel with fade effect</h1>
      </div>
      <div class="span6 offset3">
        <div id="carousel_fade" class="carousel slide carousel-fade">
          <div class="carousel-inner">
            <div class="item active">
              <!-- you can add any content here-->
              <img src="http://placehold.it/600x400&amp;text=Fade+effect-Page-1">
            </div>
            <div class="item ">
              <!-- you can add any content here-->
              <img src="http://placehold.it/600x400&amp;text=Fade+effect-Page-2">
            </div>
          </div>
          <a class="carousel-control left btn-control " href="#carousel_fade" data-slide="prev">‹</a>
          <a class="carousel-control right btn-control" href="#carousel_fade" data-slide="next">›</a>
        </div>
      </div>
    </div>
  </div>
  <script>
    $(function() {
      $('.carousel').carousel({
        interval: 7000
      })
    })
  </script>
</body>
</html>