swiper插件的使用

2017-12-07    标签:轮播插件    阅读:518    评论:0


swiper插件简单又好用,推荐给大家,例子:

一、形式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>



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

文章评论(0)

登录

博主信息

头像

生活很平淡,也很烦躁,如果您每天都能学到新东西,您就可以每天教别人新东西,今天的辛苦,是为了明天的更好。

职业:Web攻城狮

Email:2938039696@qq.com

学习交流群:简忆blogs技术群

项目合作:2938039696

置顶推荐

站点信息

846运行天数

222文章数量

网站程序:ThinkPHP5
主题框架:Foundation5
网站地图:XML网站地图
微信公众号:扫码关注公众号
公众号

打赏本站

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