1

我正在使用 swiper 来显示一系列相同高度但宽度不同的图像,因此使用了不同宽度的方法。但是,我需要一个循环的解决方案。不同宽度的演示代码是: https ://github.com/nolimits4web/Swiper/blob/master/demos/14-different-widths.html

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide red-slide" style="width:200px;">
      <div class="title">Slide 1</div>
    </div>
    <div class="swiper-slide blue-slide" style="width:150px;">
      <div class="title">Slide 2</div>
    </div>
    <div class="swiper-slide orange-slide" style="width:250px;">
      <div class="title">Slide 3</div>
    </div>
    <div class="swiper-slide blue-slide" style="width:415px;">
      <div class="title">Slide 4</div>
    </div>
    <div class="swiper-slide red-slide" style="width:510px;">
      <div class="title">Slide 5</div>
    </div>
    <div class="swiper-slide green-slide" style="width:375px;">
      <div class="title">Slide 6</div>
    </div>
  </div>
  <div class="pagination"></div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/idangerous.swiper-2.1.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
  pagination: '.pagination',
  paginationClickable: true,
  slidesPerView: 'auto'
})
</script>

向脚本添加循环参数并不能实现我正在寻找的内容,例如

var mySwiper = new Swiper('.swiper-container',{
  pagination: '.pagination',
  paginationClickable: true,
  slidesPerView: 'auto',
  loop: true
})

或者

var mySwiper = new Swiper('.swiper-container',{
  slidesPerView: 'auto',
  loop: true
})

谢谢

4

0 回答 0