流光溢彩Bootstrap响应式幻灯片特效

<section class="awSlider">

  <div  class="carousel slide" data-ride="carousel">

    <!-- Indicators -->

    <ol class="carousel-indicators">

      <li data-target=".carousel" data-slide-to="0" class="active"></li>

      <li data-target=".carousel" data-slide-to="1"></li>

      <li data-target=".carousel" data-slide-to="2"></li>

      <li data-target=".carousel" data-slide-to="3"></li>

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

      <div class="item active">

        <img src="img/1.jpg">

        <div class="carousel-caption">Görsel #1</div>

      </div>

      ......

    </div>

    <!-- Controls -->

    <a class="left carousel-control" href=".carousel" role="button" data-slide="prev">

      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

      <span class="sr-only">Geri</span>

    </a>

    <a class="right carousel-control" href=".carousel" role="button" data-slide="next">

      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

      <span class="sr-only">İleri</span>

    </a>

  </div>

</section>

section.awSlider > img{

  position:absolute;

  top:30px;

  z-index:1;

  transition:all .3s;

  filter: blur(1.8vw);

  -webkit-filter: blur(2vw);

  -moz-filter: blur(2vw); 

  -o-filter: blur(2vw); 

  -ms-filter: blur(2vw);

  -ms-transform: scale(1.1);

  -webkit-transform: scale(1.1);

  transform: scale(1.1);

  opacity:.5;

}     

section.awSlider:hover > img{

  -ms-transform: scale(1.2);

  -webkit-transform: scale(1.2);

  transform: scale(1.2);

  opacity:1;

}

$('section.awSlider .carousel').carousel({

    pause: 'hover',

    interval: 2000

});

var startImage = $('section.awSlider .item.active > img').attr('src');

$('section.awSlider').append('<img src="' + startImage + '">');

$('section.awSlider .carousel').on('slid.bs.carousel', function () {

    var bscn = $(this).find('.item.active > img').attr('src');

    $('section.awSlider > img').attr('src', bscn);

});