title: How can I reinitialize a swiper.js instance after destroying it?
body: <p>I want to be able to toggle between a slider view and a grid view with a button. I start off with the slider view, initialized like so:</p>
  
  <pre><code>var vis = document.getElementById('vis'),
      swiperOpts = {
              direction: dir,
              loop: true,
              slidesPerView: 1,
              mousewheel: true,
              keyboard: {
                  enabled: true,
                  onlyInViewport: false
              },
              pagination: {
                  el: '#swiper-page',
                  type: 'fraction',
              },
              autoplay: {delay: 4444},
              on:{
                  resize: function(){
                      if(isLand()) swiper.changeDirection('horizontal');
                      else swiper.changeDirection('vertical');
  
                      swiper.update();
                  },
                  autoplayStart: function(){
                      playBtn.innerHTML = '&lt;span class="icon-pause2"&gt;&lt;/span&gt;&lt;span class="sr-only"&gt;pause&lt;/span&gt;';
                  },
                  autoplayStop: function(){
                      playBtn.innerHTML = '&lt;span class="icon-play3"&gt;&lt;/span&gt;&lt;span class="sr-only"&gt;play&lt;/span&gt;';
                  }
              }
          },
          swiper = new Swiper(vis, swiperOpts)
  </code></pre>
  
  <p>I switch to the grid view via:</p>
  
  <pre><code>swiper.destroy(false,true);
  vis.classList.remove('swiper-container');
  vis.classList.add('grid');
  </code></pre>
  
  <p>This all works fine. But then I reinitialize, sic:</p>
  
  <pre><code>vis.classList.add('swiper-container');
  vis.classList.remove('grid');
  swiper.init(swiperOpts);
  swiper.autoplay.start();
  </code></pre>
  
  <p>The slider comes back and autoplay works for one slide but then it quits working. My buttons don't work, keyboard navigation, pagination, mousewheel; none of that works. But clicking and dragging still works as well as touch navigation. I tried <code>init()</code> with and without the <code>swiperOpts</code> object and I've played with options for <code>destroy()</code> but it hasn't made a difference. I've also tried throwing in <code>swiper.attachEvents()</code> and <code>swiper.update()</code> for good measure but still without result. I can, of course, reload the page but I'd prefer to be able to switch back as seamlessly as possible. What am I missing?</p>
  
  <p>Thanks</p>