swiper的基础使用(十四)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了swiper的基础使用(十四)相关的知识,希望对你有一定的参考价值。
本文为H5EDU机构官方的HTML5培训教程 swiper教程swiper教程。
这次内容我们介绍如何在swiper页面当中开启循环模式。
首先让我们用积累了十四节……不十三节的功力来搭建一个基本的swiper的布局。并且根据需要来设置CSS样式。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">H5EDU 1<img src="logo.png"></div> <div class="swiper-slide">H5EDU 2<img src="logo.png"></div> <div class="swiper-slide">H5EDU 3<img src="logo.png"></div> <div class="swiper-slide">H5EDU 4<img src="logo.png"></div> <div class="swiper-slide">H5EDU 5<img src="logo.png"></div> <div class="swiper-slide">H5EDU 6<img src="logo.png"></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>
然后到js当中进行页面的初始化,再加上我们的循环属性(loop:true).
var swiper = new Swiper(‘.swiper-container‘,{ pagination:‘.swiper-pagination‘, paginationClickable:true, nextButton:‘.swiper-button-next‘, prevButton:‘.swiper-button-prev‘, slidesPerView:1, spaceBetween:30, loop:true //开启循环属性 });
完成之后我们就可以一直进行翻页了,能玩三天三夜,还不会累!
本文出自 “11721999” 博客,请务必保留此出处http://11731999.blog.51cto.com/11721999/1795565
以上是关于swiper的基础使用(十四)的主要内容,如果未能解决你的问题,请参考以下文章