How to make on slick in one slide a photo on the left and two on the right?

Question

Layout

Initially, such a structure. And if you change the nesting, it stops working. How to build such a structure?

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

Also, I included only 3 slides and that would also scroll 3. But as soon as you change the structure of the divs inside, everything stops working.

slidesToShow: 3,
  slidesToScroll: 3

Answer 1

Why change nesting? The div with the class 'your-class' is the slider wrapper, and all the divs nested in it are your slides, which you fill with content as you wish. Here's an option, these will be your slides. Make whatever format you need.

<div class="slider-item">
  <div class="column">
    <img src="" alt="">
  </div>
  <div class="column">
   <img src="" alt="">
   <img src="" alt="">
  </div>
</div>

.slider-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 400px;
}
img {
  display: block;
  width: 100%;
  height: 100%;
}