swiper如何动态的改变direction滑动方向属性？

Question

<button class="btn">切换</button>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide bg1">Slide 1</div>
        <div class="swiper-slide bg2">Slide 2</div>
        <div class="swiper-slide bg3">Slide 3</div>
        <div class="swiper-slide bg4">Slide 4</div>
    </div>
    <div class="swiper-button-prev control"></div>
    <div class="swiper-button-next control"></div>
 </div> 
</div>

var swiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    noSwiping : true,
    spaceBetween: 10,
    slidesPerView: 3
  }) 
  
 $(".btn").click(function() {
  swiper.params.slidesPerView = 1;
  swiper.params.direction = 'vertical';
  swiper.slides.addClass('swiper-no-swiping');
  $('.control').hide();
  swiper.update();
 });

demo：http://jsfiddle.net/knpaxzf6/
项目中一个需求是要让照片可以动态选择展示的方式，一种方式是横向滑动切换，另一种是竖直排列，
横向切换我用的是sipwer，我用上边的代码实现出现了问题，不知道是什么原因造成的，恳求各位前辈指点？

Answer 1

点击的时候先销毁然后重新初始化。

var swiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    noSwiping : true,
    spaceBetween: 10,
    slidesPerView: 3
  }); 
var swiper1;
  
 $(".btn").click(function() {
   if($(this).hasClass("horizontal")) {
    $(this).removeClass("horizontal");
    swiper1.destroy(false);
    swiper = new Swiper ('.swiper-container', {
      direction: 'horizontal',
      prevButton:'.swiper-button-prev',
      nextButton:'.swiper-button-next',
      noSwiping : true,
      spaceBetween: 10,
      slidesPerView: 3
    }); 
   }else {
    $(this).addClass("horizontal");
    swiper.destroy(false);
     swiper1 =    new Swiper ('.swiper-container', {
       direction: 'vertical',
       noSwiping : true,
       noSwipingClass : 'stop-swiping',
       spaceBetween: 10,
       slidesPerView: 3
     });
   }
 });