swiper 入门

来源：互联网发布：ipad钢琴软件编辑：程序博客网时间：2024/06/08 04:24

1、引入文件

<script src="public/js/swiper.min.js"></script><link rel="stylesheet" href="public/css/swiper.min.css">

2、滑动图片的HTML代码结构

<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="public/images/poster_7.png" class="img_responsive margin_auto" ></div><div class="swiper-slide"><img src="public/images/poster_6.png" class="img_responsive margin_auto" ></div><div class="swiper-slide"><img src="public/images/poster_5.png" class="img_responsive margin_auto" ></div><div class="swiper-slide"><img src="public/images/poster_4.png" class="img_responsive margin_auto" ></div><div class="swiper-slide"><img src="public/images/poster_3.png" class="img_responsive margin_auto" ></div><div class="swiper-slide"><img src="public/images/poster_2.png" class="img_responsive margin_auto" ></div><div class="swiper-slide"><img src="public/images/poster_1.png" class="img_responsive margin_auto" ></div></div><!-- 如果需要滚动条 --><!--<div class="swiper-scrollbar"></div>--><!-- 如果需要分页器 --><!-- <div class="swiper-pagination"></div>--></div>

3、页面加载完之后调用方法

//广告位滑动mySwiper = new Swiper ('.swiper-container', {//滑动方向为水平direction: 'horizontal',//是否循环loop: true,//是否自动滑动//autoplay:5000,//分页器的位置，在class为swiper-pagination的容器中，容器在页面任意位置，不受限制pagination: '.swiper-pagination',//滑动之后触发的事件onSlideChangeEnd: function(swiper){//获取当前var activeIndex = swiper.activeIndex;}// 如果需要滚动条//scrollbar: '.swiper-scrollbar'});//显示前一张页面$('.btn_prev').click(function(){mySwiper.slidePrev();});//显示前一张页面$('.btn_next').click(function(){mySwiper.slideNext();});

大小: 186.6 KB

查看图片附件

0 0