title: How to make slick slider only target elements as a slide with a certain class
body: <p>I have a row of images that I would like to turn into a slider using slick slider.</p>
  <p>Each image opens as a lightgallery popup when clicked on it with some custom HTML as caption. The problem is slick slider treats this caption also as a seperate slide.</p>
  <p>My html:</p>
  <pre><code>&lt;span class=&quot;designfavimgs&quot;&gt;
      &lt;a data-sub-html=&quot;#caption1&quot; class=&quot;favitem&quot; href=&quot;website.nl/image.jpg&quot; data-src=&quot;website.nl/image.jpg&quot;&gt;
          &lt;img src=&quot;website.nl/image.jpg&quot; alt=&quot;&quot; /&gt;
      &lt;/a&gt;
      &lt;div id=&quot;caption1&quot; style=&quot;display: none;&quot;&gt;
          &lt;img src=&quot;website.nl/logo.jpg&quot; /&gt;
          &lt;h4 class=&quot;subhtmlh4&quot;&gt;Maak iets moois met deze foto&lt;/h4&gt;
          &lt;div class=&quot;gallerypopupbtns&quot;&gt;
              &lt;a href=&quot;gallerij/stockfotos/image.jpg&quot;&gt;
                  &lt;button class=&quot;btnstyle purplebtn&quot; type=&quot;button&quot; name=&quot;button&quot;&gt;Maak iets moois&lt;/button&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/span&gt;
  </code></pre>
  <p>I only want '.favitem' to be a slide and in above example <code>#caption1</code> to be ignored and not turn into a slide. How can I do that?</p>
  <p>I tried this:</p>
  <pre><code>$('.designfavimgs').slick({
    slide: '.favitem',
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 1,
      arrows: false,
      dots: false,
      autoplay: false,
      speed: 2000,
      responsive: [
      {
        breakpoint: 991,
              settings: {
                  slidesToShow: 2,
          slidesToScroll: 2
        }
      }
      ]
  });
  </code></pre>
  <p>I thought <code>slide: '.favitem'</code> would work for this but it still treats the captions as seperate slides even when they are set to <code>display:none</code> inline. Slick slider just overrules it and makes them visible as slides.</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>$('.designfavimgs').slick({
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 1,
      arrows: false,
      dots: false,
      autoplay: false,
      speed: 2000,
      responsive: [
      {
        breakpoint: 991,
              settings: {
                  slidesToShow: 2,
          slidesToScroll: 2
        }
      }
      ]
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://kenwheeler.github.io/slick/slick/slick.js"&gt;&lt;/script&gt;
      
  &lt;span class="designfavimgs"&gt;
      &lt;a data-sub-html="#caption1" class="favitem" href="website.nl/image.jpg" data-src="https://via.placeholder.com/150"&gt;
          &lt;img src="https://via.placeholder.com/150" alt="" /&gt;
      &lt;/a&gt;
      &lt;div id="caption1" style="display: none;"&gt;
          &lt;img src="https://via.placeholder.com/150" /&gt;
          &lt;h4 class="subhtmlh4"&gt;Maak iets moois met deze foto&lt;/h4&gt;
          &lt;div class="gallerypopupbtns"&gt;
              &lt;a href="https://via.placeholder.com/150"&gt;
                  &lt;button class="btnstyle purplebtn" type="button" name="button"&gt;Maak iets moois&lt;/button&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/span&gt;    </code></pre>
  </div>
  </div>
  </p>