Open a Script and close another

1

Hello! I found a slide script, and it gives support to move the images vertically and horizontally. In case I put 2 buttons for the user to choose and make the exchange ... when I click in vertical or horizontal it works normal, but when one of the two is selected and the other is switched, the 2 is running. How do I do when I click on one another to stop?

The slide site: link

<li><a href="#!" id="horizontal">Horizontal</a></li>
  <li><a href="#!" id="vertical">Vertical</a></li>
$("#vertical").click(function(){
    var swiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      zoom: true,
      scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
      },
      });
    });
    $("#horizontal").click(function(){
        var swiper = new Swiper('.swiper-container', {
          zoom: true,
          scrollbar: {
            el: '.swiper-scrollbar',
            hide: true,
          },
          });
        });
    
asked by anonymous 02.01.2018 / 00:51

1 answer

1

You should use the destroy ( plugin doc ) method of the plugin to remove it from the DOM and then create it again in the desired direction.

  

Do not use var within the functions to create the instance of the plugin,   otherwise it will be inaccessible in the other function.

$("#vertical").click(function(){
   swiper.destroy();
   swiper = new Swiper('.swiper-container', {
      zoom: true,
      direction: 'vertical',
      scrollbar: {
         el: '.swiper-scrollbar',
         hide: true,
      }
   });
 });

$("#horizontal").click(function(){
   swiper.destroy();
   swiper = new Swiper('.swiper-container', {
      zoom: true,
      scrollbar: {
         el: '.swiper-scrollbar',
         hide: true,
      }
   });
});

Another code option

You can create a function for this, not to repeat the code, taking the direction by the id of the clicked button:

function destroiSwiper(dir){
   swiper.destroy();
   swiper = new Swiper('.swiper-container', {
      zoom: true,
      direction: dir,
      scrollbar: {
         el: '.swiper-scrollbar',
         hide: true,
      }
   });
}

$("#vertical, #horizontal").click(function(e){
   destroiSwiper( e.target.id );
});
    
02.01.2018 / 01:56