用的swiper2,出现这种情况,怎么解决

发布网友发布时间：2022-05-12 17:27

共2个回答

懂视网时间：2022-05-12 21:48

上一节我们实现了一个基本的滑动页面，除了滑动什么功能都没有，那么这节课我们就要在页面当中添加其他的功能属性了。

首先按照上节课的内容，将一个基本的swiper页面实现。
然后在初始化的js代码当中添加属性。

当然事先不要忘记引用下载好的框架文件。
我们先添加翻页导航的功能组件。

在外部容器当中加入翻页导航。

<div class="swiper-Container">
<div class="swiper-wrapper">
<div class="swiper-slide">页面内容</div>
<div class="swiper-slide">页面内容</div>
<div class="swiper-slide">页面内容</div>
<div class="swiper-slide">页面内容</div>
<div class="swiper-slide">页面内容</div>
</div>
<div class="swiper-pagination"></div> //翻页导航的div
</div>
<script>
var swiper = new Swiper('.swiper-container',{
pagination:'.swiper-pagination', //绑定翻页导航
paginationClickable:true //设定可以点击翻页导航进行翻页
});
</script>

这样就在页面当中添加了一个翻页导航出来。

热心网友时间：2022-05-12 18:56

你咋不去他的论坛问捏？
1.swiperAnimateCache(swiper)和swiperAnimate(swiper)是做每个slide里面那些小图片的css3动画的吧
2.progress是获取每个slide的移动位移的，从而根据他的位移来做切换动画

比方说当你向上拖动slide，拖到一半的时候，透明度（opacity）就变成原来的一半，移动距离（translate3d）和比例（scale）也会根据progress来变化
3.onSetTransition是一个回调函数，你可以参考下他的API。
4.如果你不想切得太快，就在每次切完后设定暂停时间，settimeout这样吧