title: How do I remove thumbnail slider arrow implemented from CDN
body: <p>I have implemented thumbnail slider following example from the link <a href="https://splidejs.com/thumbnail-slider/" rel="nofollow noreferrer">https://splidejs.com/thumbnail-slider/</a>. The result has reflected fine as I expected now I want to remove the arrows and the progress bar, where both arrow and progress bar added from CDN. how to achieve this.</p>
  <p>OUTPUT PICTURE</p>
  <p><a href="https://i.stack.imgur.com/qwFXY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qwFXY.png" alt="RESULT PICTURE" /></a></p>
  <p>HEADER FILES</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> &lt;script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"&gt;&lt;/script&gt;
  
       </code></pre>
  </div>
  </div>
  </p>
  <pre><code> &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css&quot;&gt;
  
   &lt;script type=&quot;text/javascript&quot; src=&quot;catalog.js&quot;&gt;&lt;/script&gt;
   &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;catalog.css&quot;&gt;
  </code></pre>
  <p>HTML CODE</p>
  <p>Primary slider</p>
  <pre><code>div id=&quot;primary-slider&quot; class=&quot;splide&quot;&gt;
  &lt;div class=&quot;splide__track col-md-7&quot;&gt;
  &lt;ul class=&quot;splide__list&quot;&gt;
    &lt;li class=&quot;splide__slide&quot;&gt;
      &lt;img src=&quot;pic3.jfif&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;splide__slide&quot;&gt;
      &lt;img src=&quot;pic3.jfif&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;splide__slide&quot;&gt;
      &lt;img src=&quot;pic1.jpg&quot;&gt;
    &lt;/li&gt;
     &lt;li class=&quot;splide__slide&quot;&gt;
      &lt;img src=&quot;pic3.jfif&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;splide__slide&quot;&gt;
      &lt;img src=&quot;pic3.jfif&quot;&gt;
    &lt;/li&gt;
    &lt;li class=&quot;splide__slide&quot;&gt;
      &lt;img src=&quot;pic1.jpg&quot;&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
    
  
  <p>Secondary slider</p>
  <pre><code> &lt;div id=&quot;secondary-slider&quot; class=&quot;splide&quot;&gt;
    &lt;div class=&quot;splide__track col-md-7&quot;&gt;
     &lt;ul class=&quot;splide__list&quot;&gt;
      &lt;li class=&quot;splide__slide&quot;&gt;
       &lt;img src=&quot;pic3.jfif&quot;&gt;
      &lt;/li&gt;
      &lt;li class=&quot;splide__slide&quot;&gt;
       &lt;img src=&quot;pic3.jfif&quot;&gt;
     &lt;/li&gt;
     &lt;li class=&quot;splide__slide&quot;&gt;
       &lt;img src=&quot;pic1.jpg&quot;&gt;
     &lt;/li&gt;
     &lt;li class=&quot;splide__slide&quot;&gt;
       &lt;img src=&quot;pic3.jfif&quot;&gt;
     &lt;/li&gt;
     &lt;li class=&quot;splide__slide&quot;&gt;
      &lt;img src=&quot;pic3.jfif&quot;&gt;
     &lt;/li&gt;
     &lt;li class=&quot;splide__slide&quot;&gt;
       &lt;img src=&quot;pic1.jpg&quot;&gt;
     &lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
     
   
  <p>JS CODE</p>
  <pre><code>document.addEventListener( 'DOMContentLoaded', function () {
  var secondarySlider = new Splide( '#secondary-slider', {
      fixedWidth  : 100,
      height      : 60,
      gap         : 10,
      cover       : true,
      isNavigation: true,
      focus       : 'center',
      breakpoints : {
          '600': {
              fixedWidth: 66,
              height    : 40,
          }
      },
  } ).mount();
  
  
  
  var primarySlider = new Splide( '#primary-slider', {
      type       : 'fade',
      heightRatio: 0.5,
      pagination : false,
      arrows     : false,
      cover      : true,
  } ); // do not call mount() here.
  
  primarySlider.sync( secondarySlider ).mount();
  </code></pre>
  <p>} );</p>