swiper插件的使用

2017-12-07   阅读:6524   类型:前端   分类:轮播插件    标签: 轮播插件

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',
                  },
                });


【腾讯云】2核2G云服务器新老同享 99元/年,续费同价,云服务器3年机/5年机限时抢购,低至 2.5折

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://tpxhm.com/fdetail/6.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×