How to make slick slider only target elements as a slide with a certain class

I have a row of images that I would like to turn into a slider using slick slider.

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.

My html:

<span class="designfavimgs">
    <a data-sub-html="#caption1" class="favitem" href="website.nl/image.jpg" data-src="website.nl/image.jpg">
        <img src="website.nl/image.jpg" alt="" />
    </a>
    <div id="caption1" style="display: none;">
        <img src="website.nl/logo.jpg" />
        <h4 class="subhtmlh4">Maak iets moois met deze foto</h4>
        <div class="gallerypopupbtns">
            <a href="gallerij/stockfotos/image.jpg">
                <button class="btnstyle purplebtn" type="button" name="button">Maak iets moois</button>
            </a>
        </div>
    </div>
</span>

I only want '.favitem' to be a slide and in above example #caption1 to be ignored and not turn into a slide. How can I do that?

I tried this:

$('.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
      }
    }
    ]
});

I thought slide: '.favitem' would work for this but it still treats the captions as seperate slides even when they are set to display:none inline. Slick slider just overrules it and makes them visible as slides.

$('.designfavimgs').slick({
  infinite: true,
  slidesToShow: 5,
  slidesToScroll: 1,
    arrows: false,
    dots: false,
    autoplay: false,
    speed: 2000,
    responsive: [
    {
      breakpoint: 991,
            settings: {
                slidesToShow: 2,
        slidesToScroll: 2
      }
    }
    ]
});

<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
    
<span class="designfavimgs">
    <a data-sub-html="#caption1" class="favitem" href="website.nl/image.jpg" data-src="https://via.placeholder.com/150">
        <img src="https://via.placeholder.com/150" alt="" />
    </a>
    <div id="caption1" style="display: none;">
        <img src="https://via.placeholder.com/150" />
        <h4 class="subhtmlh4">Maak iets moois met deze foto</h4>
        <div class="gallerypopupbtns">
            <a href="https://via.placeholder.com/150">
                <button class="btnstyle purplebtn" type="button" name="button">Maak iets moois</button>
            </a>
        </div>
    </div>
</span>

Solution

Why don't you simply wrap each item? Because slick gets initiated by adding the parent class and all children are seen as individual slides/items.

<div class="designfavimgs">
    <div class="slick-element">
        <a data-sub-html="#caption1" class="favitem" href="website.nl/image.jpg" data-src="https://via.placeholder.com/150">
            <img src="https://via.placeholder.com/150" alt="" />
        </a>
        <div id="caption1" style="display: none;">
            <img src="https://via.placeholder.com/150" />
            <h4 class="subhtmlh4">Maak iets moois met deze foto</h4>
            <div class="gallerypopupbtns">
                <a href="https://via.placeholder.com/150">
                    <button class="btnstyle purplebtn" type="button" name="button">Maak iets moois</button>
                </a>
            </div>
        </div>
    </div>
    <div class="slick-element">
        <a data-sub-html="#caption1" class="favitem" href="website.nl/image.jpg" data-src="https://via.placeholder.com/150">
            <img src="https://via.placeholder.com/150" alt="" />
        </a>
        <div id="caption2" style="display: none;">
            <img src="https://via.placeholder.com/150" />
            <h4 class="subhtmlh4">Maak iets moois met deze foto</h4>
            <div class="gallerypopupbtns">
                <a href="https://via.placeholder.com/150">
                    <button class="btnstyle purplebtn" type="button" name="button">Maak iets moois</button>
                </a>
            </div>
        </div>
    </div>
</div>