模板标签循环会导致swiper的loop失效，求助
本帖最后由 darksunny 于 2017-1-4 17:26 编辑最外层的模板循环标签 {loop} 影响了插件分页滑动的效果，模板循环这个有什么问题吗，求大神帮助
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
<!--判断新闻分类-->
{if count($resall)!=0}
{loop $restypes $index $item} //影响了插件的活动效果这里，求大神指点
<div class="swiper-slide swiper-slide-prev" style="width: 1920px; margin-right: 10px; background-color: #00a2d4;">
<!--相关新闻-->
{if $restypes[$index]['classify'] == $item['classify']}
{loop $resall $index $item}
<div class="tj_all_swiperContainer">
<div class="pad13 pb-2" style="padding: 0 !important;">
<div class="pad1 bb-1 pb-0 pt-0">
<!--更多圈子循环开始-->
<a href="javascript:void (0)">
<div class="te-cell wh-no fo-se-13 pad1 pl-0 ve-mi">
<p>
<img src="{MODULE_URL}template{$item['thumbnail']}" alt="" style="width: 7rem;">
</p>
</div>
<div class="te-cell fo-se-13 pad1 pl-0 wi-1000 ve-mi">
<!--圈子主题-->
<p class="fo-se-14">
<span style="word-wrap:break-word;word-break:break-all;">{$item['title']}</span>
</p>
<p class="fo-se-14 fo-co-2" style="text-align: right">
0跟帖
</p>
</div>
</a>
</div>
</div>
</div>
{/loop}
{else}
{/if}
</div>
{/loop}
{else}
{/if}
</div> 审查元素 admin 发表于 2017-1-4 23:30
审查元素
审查报错指向swiper插件 admin 发表于 2017-1-4 23:30
审查元素
var mySwiper = new Swiper('.swiper-containers',{报错指向这一行
autoplay : 2000,
autoplayDisableOnInteraction : false,
paginationClickable: true,
loop:true,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
});
<div style="margin: 0 auto;height: 150px;width: 100%;overflow: hidden" class="swiper-containers swiper-container-horizontal">//这一行
<div class="swiper-wrapper" style="position: relative">
<div style="background-color: red" class="swiper-slide">
<div style="width: 100%;height: 20%;background-color: black;opacity: 0.5;margin-top: 120px;"></div>
</div>
<div style="background-color: brown" class="swiper-slide">
<div style="width: 100%;height: 20%;background-color: black;opacity: 0.3;margin-top: 120px;"></div>
</div>
<div style="background-color: yellow" class="swiper-slide">
<div style="width: 100%;height: 20%;background-color: black;opacity: 0.1;margin-top: 120px;"></div>
</div>
<div style="background-color: green" class="swiper-slide">
<div style="width: 100%;height: 20%;background-color: black;opacity: 0.7;margin-top: 120px;"></div>
</div>
</div>
</div> 问题找到了，如果要整体循环swiper的轮播，那么循环出来的轮播容器id名称不一样才能正常轮播，否则只有循环出来的第一个轮播有效。这个地方让容器的id不一样还是很容易的，用模版标签给id追加值就行了，如果你不怕坑的话，这个值最好是数字。但是js里面实例化插件的时候要循环，循环实例化，这个时候上面给id追加的值就很关键了，数字绝壁很方便，，然后，，，，循环就完成实例化了。还是要靠自己解决问题，找了两天的坑 嗯嗯 ，貌似看论坛里面，看到多个轮播的解决方案都是加ID。。 请问问题解决了么，能否留下QQ一起讨论一下
页:
[1]