Swiper中文论坛

标题: swiper如何动态的改变direction滑动方向属性？ [打印本页]
作者: syyzz3    时间: 2017-11-1 11:01
标题: swiper如何动态的改变direction滑动方向属性？
  1. <button class="btn">切换</button>
  2. <div class="swiper-container">
  3.     <div class="swiper-wrapper">
  4.         <div class="swiper-slide bg1">Slide 1</div>
  5.         <div class="swiper-slide bg2">Slide 2</div>
  6.         <div class="swiper-slide bg3">Slide 3</div>
  7.         <div class="swiper-slide bg4">Slide 4</div>
  8.     </div>
  9.     <div class="swiper-button-prev control"></div>
  10.     <div class="swiper-button-next control"></div>
  11. </div>
  12. </div>

  14. var swiper = new Swiper ('.swiper-container', {
  15.     direction: 'horizontal',
  16.     nextButton: '.swiper-button-next',
  17.     prevButton: '.swiper-button-prev',
  18.     noSwiping : true,
  19.     spaceBetween: 10,
  20.     slidesPerView: 3
  21.   })
  22.   
  23. $(".btn").click(function() {
  24.   swiper.params.slidesPerView = 1;
  25.   swiper.params.direction = 'vertical';
  26.   swiper.slides.addClass('swiper-no-swiping');
  27.   $('.control').hide();
  28.   swiper.update();
  29. });
复制代码
demo：http://jsfiddle.net/knpaxzf6/
项目中一个需求是要让照片可以动态选择展示的方式，一种方式是横向滑动切换，另一种是竖直排列，
横向切换我用的是sipwer，我用上边的代码实现出现了问题，不知道是什么原因造成的，恳求各位前辈指点？

作者: yaomeiqian    时间: 2017-11-2 11:36
作者: fmyshine    时间: 2017-11-2 13:08
destroy了重新绑定，update对方向是无效的



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2