Add .slick-active class on slides that are visible

Explanation of the problem

When navigating to the end of a finite slider with multiple slides, not all of the slides receive the “.slick-active” class. This issue can be illustrated with the following setup:

Slider Configuration:

• “slidesToShow” is set to 4.
• “slidesToScroll” is set to 4.
• “infinite” is set to false.

Initial State: At the beginning, the first 4 slides are visible and have the “.slick-active” class assigned to them:

<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>

Actual Behavior: After clicking the “next” arrow, the last 4 slides become visible, but they do not receive the “.slick-active” class:

<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>

Expected Behavior: After clicking the “next” arrow, the last 4 slides should become visible and have the “.slick-active” class assigned to them:

<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for: Add .slick-active class on slides that are visible

To solve the issue described, you can make the following changes to ensure that the expected behavior is achieved:

1. Update the “slidesToScroll” property to a value less than or equal to the total number of slides. In this case, since there are only 6 slides, setting “slidesToScroll” to 2 would be a suitable choice.
2. Modify the slider’s configuration to enable the “infinite” option. This allows the slider to wrap around when reaching the end, ensuring that all slides receive the “.slick-active” class.

With these changes, the modified slider configuration would look like this:

slidesToShow={4}
slidesToScroll={2}
infinite={true}

By setting “slidesToScroll” to 2 and enabling the “infinite” option, you ensure that all slides are included in the scrolling behavior and that the “.slick-active” class is correctly applied to each slide when reaching the end of the slider.

Once you’ve implemented these changes, test the slider to verify that it now behaves as expected with all slides receiving the “.slick-active” class when navigating to the end.

.slick-slide {
  width: 300px; /* Set the desired fixed width for the slides */
}

<Slider slidesToShow={3}>
  {/* Slides */}
</Slider>

<Slider fade={true}>
  {/* Slides */}
</Slider>

<Slider>
  <div className="slick-list">
    {/* Slides */}
  </div>
</Slider>

import React from 'react';
import Slider from 'react-slick';

const ImageCarousel = () => {
  const settings = {
    dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
  };

  return (
    <Slider {...settings}>
      <div>
        <img src="image1.jpg" alt="Image 1" />
      </div>
      <div>
        <img src="image2.jpg" alt="Image 2" />
      </div>
      <div>
        <img src="image3.jpg" alt="Image 3" />
      </div>
      {/* More image slides */}
    </Slider>
  );
};