title: multiple Splide sliders
body: <p>I'm using this site &amp; Splide.js for the first time. I know some basics but i'm not experienced in this. I want to create multiple slides on my page but the mainslide stays active all the time.</p>
  <p>So what I'm doing is creating both sliders:</p>
  <pre><code>document.addEventListener( 'DOMContentLoaded', function () {
      mainslide = new Splide( '#mainslide', {
          type   : 'loop',
          perPage: 5,
          perMove: 1,
          direction: 'rtl',
          trimSpace: false,
          keyboard: true,
          gap: '1em',
          width: '100%',
          height: '100%',
      })
      wheelslide = new Splide( '#wheelslide', {
          type: 'loop',
          perPage: 5,
          perMove: 1,
          direction: 'rtl',
          trimSpace: false,
          keyboard: true,
          gap: '1em',
          width: '100%',
          height: '100%'
      })
  } );
  </code></pre>
  <p>When I'm opening my page im doing:</p>
  <pre><code>mainslide.mount();
  </code></pre>
  <p>And when i'm opening another page where I want to display another slider i'm doing:</p>
  <pre><code>$('#mainslide').hide()
  mainslide.destroy(true)
  mainslide.mount();
  $('#wheelslide').show()
  </code></pre>
  <p>Whats happening now is that the new page or the new slider still thinks i'm working with the first slider. So the first slider does not get destroyed imo. When I console.log the id of the slider i still have the id <strong>mainslide01</strong> instead it should be <strong>wheelslide01</strong>. I'm a bit stuck and I dont know how to continue from here.</p>
  <p>Thanks in advance</p>