Swiper中文论坛

标题: 模板标签循环会导致swiper的loop失效，求助 [打印本页]

作者: darksunny 时间: 2017-1-4 17:22
标题: 模板标签循环会导致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
审查元素

作者: darksunny 时间: 2017-1-5 09:53

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

审查报错指向swiper插件

作者: darksunny 时间: 2017-1-5 10:25

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

作者: love2010大叔 时间: 2017-3-2 21:25
嗯嗯，貌似看论坛里面，看到多个轮播的解决方案都是加ID。。

作者: faith 时间: 2017-3-14 14:14
请问问题解决了么，能否留下QQ一起讨论一下

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)