Swiper中文论坛

标题: loop设置了为什么没有效果 [打印本页]

---

作者: 轮了个回    时间: 2021-1-30 18:12
标题: loop设置了为什么没有效果

1. <div><font color="#808080" face="Consolas"><template></font></div><div><font color="#808080" face="Consolas">  <div id="r-homePage"></font></div><div><font color="#808080" face="Consolas">    <swiper :options="swiperOption" ref="mySwiper"></font></div><div><font color="#808080" face="Consolas">      <swiper-slide class="swiper-slide" v-for="ele in picData" :key="ele.id"></font></div><div><font color="#808080" face="Consolas">        <el-image class="sam_wh_100" :src="ele.path ? __imgSrc(ele.path) : ''" fit="cover"></font></div><div><font color="#808080" face="Consolas">          <div slot="placeholder" class="image-slot"></font></div><div><font color="#808080" face="Consolas">            <i class="sam_loading"></i></font></div><div><font color="#808080" face="Consolas">          </div></font></div><div><font color="#808080" face="Consolas">        </el-image></font></div><div><font color="#808080" face="Consolas">      </swiper-slide></font></div><div><font color="#808080" face="Consolas">      <div class="swiper-pagination" slot="pagination"></div></font></div><div><font color="#808080" face="Consolas">      <div class="swiper-button-prev" slot="button-prev"></div></font></div><div><font color="#808080" face="Consolas">      <div class="swiper-button-next" slot="button-next"></div></font></div><div><font color="#808080" face="Consolas">    </swiper></font></div><div><font color="#808080" face="Consolas">  </div></font></div><div><font color="#808080" face="Consolas"></template></font></div><div><font color="#808080" face="Consolas">
   
2. </font></div><div><font color="#808080" face="Consolas"><script></font></div><div><font color="#808080" face="Consolas">export default {</font></div><div><font color="#808080" face="Consolas">  name: "homePage",</font></div><div><font color="#808080" face="Consolas">  data() {</font></div><div><span style="color: rgb(128, 128, 128); font-family: Consolas;">    return {</span></div><div><font color="#808080" face="Consolas">      picData: [],</font></div><div><span style="color: rgb(128, 128, 128); font-family: Consolas;">      swiperOption: {</span></div><div><font color="#808080" face="Consolas">        loop: true,</font></div><div><span style="color: rgb(128, 128, 128); font-family: Consolas;">        autoplay: {</span></div><div><font color="#808080" face="Consolas">          delay: 5000,</font></div><div><font color="#808080" face="Consolas">          stopOnLastSlide: false,</font></div><div><font color="#808080" face="Consolas">        },</font></div><div><font color="#808080" face="Consolas">        // 显示分页</font></div><div><font color="#808080" face="Consolas">        pagination: {</font></div><div><font color="#808080" face="Consolas">          el: ".swiper-pagination",</font></div><div><font color="#808080" face="Consolas">          clickable: true, //允许分页点击跳转</font></div><div><font color="#808080" face="Consolas">        },</font></div><div><font color="#808080" face="Consolas">        // 设置点击箭头</font></div><div><font color="#808080" face="Consolas">        navigation: {</font></div><div><font color="#808080" face="Consolas">          nextEl: ".swiper-button-next",</font></div><div><font color="#808080" face="Consolas">          prevEl: ".swiper-button-prev",</font></div><div><font color="#808080" face="Consolas">        },</font></div><div><font color="#808080" face="Consolas">      },</font></div><div><font color="#808080" face="Consolas">    };</font></div><div><font color="#808080" face="Consolas">  },</font></div><div><font color="#808080" face="Consolas">  methods: {</font><span style="color: rgb(128, 128, 128); font-family: Consolas;">},</span></div><div><font color="#808080" face="Consolas">  computed: {</font></div><div><font color="#808080" face="Consolas">    swiper() {</font></div><div><font color="#808080" face="Consolas">      return this.$refs.mySwiper.swiper;</font></div><div><font color="#808080" face="Consolas">    },</font></div><div><font color="#808080" face="Consolas">  }</font></div><div><font color="#808080" face="Consolas">};</font></div><div><font color="#808080" face="Consolas"></script></font></div>

复制代码

设置了loop: true  也没有效果，导致autoplay也只自动播放一轮就会停止。

---

作者: gcb119    时间: 2021-2-1 15:53


  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      loop:false,  //复制多份循环(true/false，这里就是让轮播看起来是循环的，下方disableOnInteraction值为true时此处生效)
      autoplay: {   //设定自动播放
        delay: 2500, //自动切换的时间间隔如3000（单位ms）
        disableOnInteraction: true, //点击后打断auto-play，true/false
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>



重点关注注释部分的代码，微信扫码看我的demo


顺便说一句，我的用的最新6.4.5版源码（昨天下午开始学习swiper的，这两天在恶补）

---

作者: Hoody    时间: 2021-2-20 16:20
vertical 类型的我记得是要设置好高度才可以

---

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

Powered by Discuz! X3.2