Open a Script and close another

Question

Open a Script and close another

Navigation

#1 by (1 votes)

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,
          },
          });
        });

javascript

asked by anonymous 02.01.2018 / 00:51

1 answer

Why does not my mode close? Search in DB with For Repetition

score 1 · Accepted Answer

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 );
});