为什么我标题能说的如此夸张,如此好,只有是你能想到的效果,我这个库里都能实现。
那么我这个库是什么呢。就是-----------Swiper。
这是一个既能在手机端显示,也能在pc端大显身手。
Swiper拥有简单又好用的插件
这些插件可以实现更复杂的效果,而制作这些效果的过程却很简单。
合理的利用Swiper的插件可以加速开发,这会让你的老板对你的工作效率大加赞赏!
那么首先
我们需要一个官网:
http://www.swiper.com.cn/download/index.html
我们要下载Swiper.js库和Swiper.css、
大家要注意了,在有需要的效果去官网上粘贴时,css,html 必须的和官网的一模一样。
只可添加,不可删除。
以上都完成后,有需要更炫 的效果可以看一下API文档。
关于效果重用的问题:
给每一个.wiper-container 再添加一个Class;
在下面新建对象的时候直接写新建的class即可。
或许说了这些还是不懂,那么我就代码伺候了
css就不给大家中了,因为都一样。
html
<body>
<div class="swiper-container swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination2"></div>
</div>
<div class="swiper-container swiper-container1">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<!--<div class="swiper-pagination swiper-pagination1"></div>-->
</div>
</body>
script
<script>
var swiper = new Swiper('.swiper-container2', {
pagination: '.swiper-pagination2',
paginationClickable: true,
spaceBetween: 0,
});
var swiper = new Swiper('.swiper-container1', {
pagination: '.swiper-pagination1',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 0,
freeMode: true
});
</script>