title: Problem showing the main slider on user click in a splidejs carousel
body: <p>I just made a carousel using splide and I just made it in the way I want. There is only one detail left and it doesn't work. I don't want to show the main slider at the beginning and begin to show it only when the user click on any thumbnail. I implemented it this way:</p>
  <pre><code>#main-slider{
      display:none;
  }
  </code></pre>
  <p>and then</p>
  <pre><code>thumbnails.on('click', function(){
              document.getElementById('main-slider').style.display = &quot;block&quot;;
          })
  </code></pre>
  <p>But the main slider only get partially visible. That is, only pagination and arrows will display. No way to show everything, especially the image.</p>
  <p>Here's the entire code:</p>
  <pre><code>{% load static %}
  {% comment %} If you want to fully customize the slider appearance, pick the splide-core.min.css file that does not include arrows, pagination and progress bar styles, which reduces unnecessary &quot;override&quot; works.  {% endcomment %}
  &lt;link href=&quot;{% static 'js/splide-3.2.1/dist/css/splide.min.css' %}&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;style&gt;
  .splide__slide {
      /* opacity of the thumbnails */
      opacity: .6; 
  }
  
  .splide__slide.is-active {
      /* opacity of the selected thumbnail */
      opacity: 1;
  }
  
  #main-slider{
      display:none;
  }
  &lt;/style&gt;
  &lt;div class=&quot;splide&quot;&gt;
  &lt;div id=&quot;main-slider&quot; class=&quot;splide&quot;&gt;
      &lt;div class=&quot;splide__track&quot;&gt;
          &lt;ul class=&quot;splide__list&quot;&gt;
          {% for image in images %}
              &lt;li class=&quot;splide__slide&quot;&gt;
                  &lt;img src=&quot;{{ image.image.url }}&quot; /&gt;
              &lt;/li&gt;
          {% endfor %}
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id=&quot;thumbnail-slider&quot; class=&quot;splide&quot;&gt;
      &lt;div class=&quot;splide__track&quot;&gt;
          &lt;ul class=&quot;splide__list&quot;&gt;
              {% for image in images %}
                  &lt;li class=&quot;splide__slide&quot;&gt;
                      {% comment %} data-splide-lazy must be enabled for lazy load {% endcomment %}
                      &lt;img src=&quot;{{ image.image.url }}&quot; data-splide-lazy=&quot;{{ image.image.url }}&quot;&gt;
                  &lt;/li&gt;
              {% endfor %}
          &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      document.addEventListener( 'DOMContentLoaded', function () {
          var main = new Splide( '#main-slider', {
              type       : 'slide',
              heightRatio: 0.5,
              speed      :500,
              pagination : true,
              arrows     : true,
              cover      : true,
          } );
  
          var thumbnails = new Splide( '#thumbnail-slider', {
              fixedWidth  : 100,
              fixedHeight : 60,
              gap         : 10,
              perMove     : 1,
              perPage     : 1,
              rewind      : true,
              pagination  : false,
              cover       : true,
              isNavigation: true,
              lazyLoad    : false,
              keyboard    : true,
              wheel       : true,
              focus      : 'center',
                dragMinThreshold: {
                  mouse: 4,
                  touch: 10,
              },
              breakpoints : {
                  600: {
                      fixedWidth : 60,
                      fixedHeight: 44,
                  },
              },
          } );
          main.sync( thumbnails );
          main.mount();
          thumbnails.mount();
          thumbnails.on('click', function(){
              document.getElementById('main-slider').style.display = &quot;block&quot;;
          })
      } );
      &lt;/script&gt;
      &lt;script src=&quot;{% static 'js/splide-3.2.1/dist/js/splide.min.js' %}&quot;&gt;&lt;/script&gt;
  </code></pre>