CODEWITHSUNDEEP
css-selectorscarouselslick.js
Pwntastic
Pwntastic

Reputation: 481

Target Active Element in Slick Carousel

Hey guys I cant seem to find a solution on targeting the active element in a slick carousel. All I'm wanting to do is add a style to the active element clicked.

I've tried 

.slick-active { background: lightgray;}
.slick-active + .slick-active { background: white; }

.slick-active:nthchild(1){}
.slick-active:nth-type-of(1){}
.slick-active:first-type-of{}
}

The first option worked if the slide contained a few elements but I don't want to have to hard code that for every element added.

If I use .slick-active{} it will target all elements showing.

Any ideas? I am using slick carousel.

Upvotes: 1

Views: 3547

Answers (1)

Frits
Frits

Reputation: 7614

Yes, .slick-active is applied to all current slick elements that are visible in your carousel, the class that you're looking for the currently selected element is .slick-current

Your rule would be:

.slick-slide               { background: white;}
.slick-slide.slick-current { background: lightgray;}

Here's a working example below, click on the blue Run code snippet button on the bottom to see it in action.

$('#slider').slick({
  infinite: true,
  slidesToShow: 3,
  centerMode: true,
  slidesToScroll: 1
});
h1 {
  text-align: center;
  color: red;
  margin: 0;
}
.slick-slide {
  background-color: white;
}
.slick-slide.slick-current h1 {
  background-color: lightgray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div id="slider">
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
  <h1>6</h1>
  <h1>7</h1>
  <h1>8</h1>
  <h1>9</h1>
</div>

Upvotes: 1

Related Questions