模板标签循环会导致swiper的loop失效，求助

darksunny

最外层的模板循环标签 {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

审查元素

darksunny

admin 发表于 2017-1-4 23:30
审查元素

审查报错指向swiper插件

darksunny

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>

darksunny

问题找到了，如果要整体循环swiper的轮播，那么循环出来的轮播容器id名称不一样才能正常轮播，否则只有循环出来的第一个轮播有效。这个地方让容器的id不一样还是很容易的，用模版标签给id追加值就行了，如果你不怕坑的话，这个值最好是数字。但是js里面实例化插件的时候要循环，循环实例化，这个时候上面给id追加的值就很关键了，数字绝壁很方便，，然后，，，，循环就完成实例化了。还是要靠自己解决问题，找了两天的坑

love2010大叔

嗯嗯 ，貌似看论坛里面，看到多个轮播的解决方案都是加ID。。

faith

请问问题解决了么，能否留下QQ一起讨论一下