如何使用Bootstrap-carousel lazy多图像SLide加载器？

Question

当我左右按钮时，Slider Contain div会慢慢显示 如何使用 .slidder-imgClass SLowly显示淡出和移动
如何使用Jquery和Java Script ...........

I wanted This Style

<div id="carousel-example-generic">
      <div data-ride="carousel" class="carousel slide carousel-fade" id="carousel-example-captions">
        <div class="carousel-inner">
          <div class="item active">
                <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                </div>
                  <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                </div>
               <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                </div>
               <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                </div>
          </div>
          <div class="item ">
                <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                </div>
               <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                </div>
               <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                </div>
               <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                </div>
          </div>
           <div class="item ">
                <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                </div>
               <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                </div>
               <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                </div>
               <div class="slider-img">
                    <img src="http://img.tjskl.org.cn/pic/z2577d9d-200x200-1/pinarello_lungavita_2010_single_speed_bike.jpg" alt="item" />
                </div>
          </div>

         </div>
         <a data-slide="prev" href="#carousel-example-captions" class="left carousel-control">left</a> 
          <a data-slide="next" href="#carousel-example-captions" class="right carousel-control">right </a>  

        </div>

的jquery

  $("a.left").click(function(){
      // how use slider-img are slow show and hide
   });
  $("a.right").click(function(){
      // how use slider-img are slow show and hide
  });

SEEDEMO

Answer 1

试试这个会对你有用：

Demo

.carousel.c-fade .active.left,
 .carousel.c-fade .active.right {
     left: 0;
     z-index: 2;
     opacity: 0;
     filter: alpha(opacity=0);
   }
   .carousel.c-fade .next,
   .carousel.c-fade .prev {
      left: 0;
      z-index: 1;
   }
   .carousel.c-fade .carousel-control {
      z-index: 3;

    }