Solution 1 :

I don’t know why slick treats the first slide like this, but I have found a short answer to this problem:

//slick slider initial
$('.slider').slick({
  infinite: true,
  slidesToShow: 2,
  slidesToScroll: 1,
});

// slick "beforeChange" event
$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  let activeIndex = $(this).find('.active').attr('data-index');
  let zoneIndexes = (nextSlide >= slick.slideCount - 1) ? [nextSlide, 0] : [nextSlide, nextSlide + 1];

  if (activeIndex == 0) {
    $(this).find('.slide[data-index=0]').addClass('active')
  }

  console.log('active index: ' + activeIndex + ' , zone indexes: ' + zoneIndexes)

  if (typeof activeIndex !== "undefined" && !(activeIndex == zoneIndexes[0] || activeIndex == zoneIndexes[1])) {
    $('.slide').removeClass('active');
  }
});


$('.selector').on('click', function() {
  $('.slide').removeClass('active');
  $(this).parent().addClass('active');
});
.slide {
  height: 400px;
  text-align: center;
  line-height: 200px;
  font-weight: bold;
  font-size: 25px;
  color: white;
  border: 4px solid transparent;
  display: flex;
  flex-direction: column;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.cyan {
  background-color: cyan;
}

.slick-list {
  padding-right: 20%!important;
}

.slide.active {
  color: gold;
  font-size: 35px;
  border: 4px solid gold;
}

.selector {
  padding: 10px 20px;
  background-color: black;
  color: white;
  cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">

<div class="container">
  <div class="row">
    <div class="col-12 slider">
      <div class="slide red" data-index="0">SLIDE 0<span class="selector">select me</span></div>
      <div class="slide blue" data-index="1">SLIDE 1<span class="selector">select me</span></div>
      <div class="slide green" data-index="2">SLIDE 2<span class="selector">select me</span></div>
      <div class="slide cyan" data-index="3">SLIDE 3<span class="selector">select me</span></div>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

Problem :

I’m going to make a slider with the help of slick.js.
I also use Bootstrap and jQuery in this project.

This slider shows two slides in full and one slide in half.
Each slide that is selected takes an active class and holds it until it comes out of two complete slides mode.
I have no problem implementing this slider and all the slides are working correctly except for the first slide.
The problem is that when the first slide is switching between full modes it loses its active class and regains it.

The code is inserted here:

//slick slider initial
$('.slider').slick({
  infinite: true,
  slidesToShow: 2,
  slidesToScroll: 1,
});

// slick "beforeChange" event
$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  let activeIndex = $(this).find('.active').attr('data-index');
  let zoneIndexes = (nextSlide >= slick.slideCount - 1) ? [nextSlide, 0] : [nextSlide, nextSlide + 1];

  console.log('active index: ' + activeIndex + ' , zone indexes: ' + zoneIndexes)

  if (typeof activeIndex !== "undefined" && !(activeIndex == zoneIndexes[0] || activeIndex == zoneIndexes[1])) {
    $('.slide').removeClass('active');
  }
});


$('.selector').on('click', function() {
  $('.slide').removeClass('active');
  $(this).parent().addClass('active');
});
.slide {
  height: 400px;
  text-align: center;
  line-height: 200px;
  font-weight: bold;
  font-size: 25px;
  color: white;
  border: 4px solid transparent;
  display: flex;
  flex-direction: column;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.cyan {
  background-color: cyan;
}

.slick-list {
  padding-right: 20%!important;
}

.slide.active {
  color: gold;
  font-size: 35px;
  border: 4px solid gold;
}

.selector {
  padding: 10px 20px;
  background-color: black;
  color: white;
  cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">

<div class="container">
  <div class="row">
    <div class="col-12 slider">
      <div class="slide red" data-index="0">SLIDE 0<span class="selector">select me</span></div>
      <div class="slide blue" data-index="1">SLIDE 1<span class="selector">select me</span></div>
      <div class="slide green" data-index="2">SLIDE 2<span class="selector">select me</span></div>
      <div class="slide cyan" data-index="3">SLIDE 3<span class="selector">select me</span></div>
    </div>
  </div>
</div>




<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

Thanks for your help.

By