swiper插件的使用

swiper插件简单又好用，推荐给大家，例子：

swiper3.0

一、形式1

html代码：

<div class="swiper-container" id="al-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><a href=""><img src="images/d1.jpg" alt="" /></a></div>
                    <div class="swiper-slide"><a href=""><img src="images/d2.jpg" alt="" /></a></div>
                </div>
                <!-- <div class="swiper-button-next swiper-button-black" id="al-button-next"></div> -->
                <!-- <div class="swiper-button-prev swiper-button-black" id="al-button-prev"></div> -->
                <!-- Add Pagination -->
                    <div class="swiper-pagination" id="al-pagination"></div>
                   <!-- Add Arrows -->
        </div>
            <script>
                var swiper = new Swiper('#al-container', {
                    pagination: '#al-pagination',
                    nextButton: '#al-button-next',
                    prevButton: '#al-button-prev', 
                    slidesPerView: 1,
                    paginationClickable: true,
                    spaceBetween: 30,
                    autoplay: 4500,
                    speed:600,
                    autoplayDisableOnInteraction : false,
                    loop: true
                })
            </script>

css样式更改、定制

#al-container{ width: 1063px; height: 731px; float: left; margin-left: 65px;}
#al-pagination{bottom: 62px;}
#al-pagination .swiper-pagination-bullet{ background: #fff; opacity: 1; }
#al-pagination .swiper-pagination-bullet-active{ background: blue;}
#al-button-next{ background: url(images/btn_r.png) no-repeat; top: 8%; width: 36px; height: 36px;}
#al-button-prev{ background: url(images/btn_l.png) no-repeat; top: 8%;width: 36px; height: 36px;}

二、形式2

html代码：

<div class="swiper_list">    
<div class="tab">    
<span class="active">选项1</span>    
<span>选项2</span>    
<span>选项3</span>    
</div>    
<div class="swiper-container" id="swper1-container" >    
<div class="swiper-wrapper">    
<div class="swiper-slide"><img src="images/cj_67.jpg" width="100%" alt=""></div>    
<div class="swiper-slide"><img src="images/last3_02.jpg" width="100%" alt=""></div>    
<div class="swiper-slide"><img src="images/last2_02.jpg" width="100%" alt=""></div>    
</div>    
</div>    
</div>

var mySwiper2 = new Swiper('#swper1-container', {    
autoplay: 3000, //可选选项，自动滑动    
onSlideChangeStart: function(swiper) {    
var j = mySwiper2.activeIndex;    
$('.tab span').removeClass('active').eq(j).addClass('active');    
},    
//pagination: '.pagination1',    
});    
/*列表切换*/    
$('.tab span').bind('click', function(e) {    
e.preventDefault();    
//得到当前索引    
var i = $(this).index();    
$('.tab span').removeClass('active').eq(i).addClass('active');    
mySwiper2.slideTo(i, 1000, false);    
});

三、形式3

<div class="swiper-container" id="al-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><a href=""><img src="images/d1.jpg" alt="" /></a></div>
                    <div class="swiper-slide"><a href=""><img src="images/d2.jpg" alt="" /></a></div>
                </div>
                <!-- <div class="swiper-button-next swiper-button-black" id="al-button-next"></div> -->
                <!-- <div class="swiper-button-prev swiper-button-black" id="al-button-prev"></div> -->
                <!-- Add Pagination -->
                    <div class="swiper-pagination" id="al-pagination"></div>
                   <!-- Add Arrows -->
</div>
<script>
var swiper = new Swiper('#al-container', {    
pagination: '#al-pagination',    
paginationClickable: true,    
direction: 'vertical',    
// 如果需要前进后退按钮    
nextButton: '#al-button-next',    
keyboardControl : true,    
mousewheelControl : true,    
direction:'vertical',    
mousewheelForceToAxis : true,    
autoplay:3000    
});     
</script>

swiper4.0

html代码：

<div class="swiper-container" id="swiper-container1">
<div class="swiper-wrapper">
  <div class="swiper-slide">
	  1
  </div>
  <div class="swiper-slide">
	  2
  </div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next" id="swiper-button-next1"></div>
<div class="swiper-button-prev" id="swiper-button-prev1"></div>
</div>

js代码：

 var swiper = new Swiper('#swiper-container1', {
                  slidesPerView: 4,
                  spaceBetween: 13,
                  centeredSlides: false,
                  autoplay: {
                    delay: 2500,
                    disableOnInteraction: true,
                  },
                  loop: true,
                  loopFillGroupWithBlank: true,
                  pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                  },
                  navigation: {
                    nextEl: '#swiper-button-next1',
                    prevEl: '#swiper-button-prev1',
                  },
                });