Dmitriy Demidovich Dmitriy Demidovich - 2 years ago 168
CSS Question

Selection of active slick-slide

I have code structure like this and i need to set some attributes for each first and last active element. How i can do that ?

<div class="slick-slider">
<div class="slide-item slick-slide ">
1
</div>
<div class="slide-item slick-slide ">
1
</div>
<div class="slide-item slick-slide slick-active slick-current">
1
</div>
<div class="slide-item slick-slide slick-active">
1
</div>
<div class="slide-item slick-slide slick-active">
1
</div>
<div class="slide-item slick-slide slick-active">
1
</div>
<div class="slide-item slick-slide ">
1
</div>
<div class="slide-item slick-slide ">
1
</div>
</div>

AKA AKA
Answer Source

You can simply use the :first and :last property selector for JQuery to get the first and last element of the desired class like shown below:

var firstSlick = $('.slick-active:first');
var lastSlick = $('.slick-active:last');

$(firstSlick).addClass('first-slick');
$(lastSlick).addClass('last-slick');
.first-slick{
  color:green;
}

.last-slick{
  color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slick-slider">
    <div class="slide-item slick-slide ">
        1
    </div>
    <div class="slide-item slick-slide ">
        1
    </div>
    <div class="slide-item slick-slide slick-active slick-current">
        1
    </div>
    <div class="slide-item slick-slide slick-active">
        1
    </div>
    <div class="slide-item slick-slide slick-active">
        1
    </div>
    <div class="slide-item slick-slide slick-active">
        1
    </div>
    <div class="slide-item slick-slide ">
        1
    </div>
    <div class="slide-item slick-slide ">
        1
    </div>  
</div>

For better understanding i have added first-slick and last-slick classes to the first and last element.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download