Select Second Active Slide in Slickslider Through CSS-Selector

select second active slide in slickslider through css-selector

You can do it this way by playing process of elimination:

.slickslider .slick-active + .slick-active:nth-child(odd){
    background: pink !important;
}

See demo

Basically, eliminate the first one with the + and next, eliminate the last one by choosing the odd child. Or first child would've worked too

EDIT

If you think there will be more than 3 active slides in the future and you want to make this more dependable, I suggest you wrap the active slides in a <span> and class it active-slides or something similar. Then. you will be able to select through them with nth-child without using .slickslider as a parent.

Slick slider - Add class to 'slick-active'

Simple, just use Adjacent sibling selectors (+) .slick-active for 1st match, .slick-active + .slick-active for 2nd match, .slick-active + .slick-active + .slick-active for the 3rd one:

.slick-active {
  background: red;
}

.slick-active + .slick-active {
  background: blue;
}

.slick-active + .slick-active + .slick-active {
  background: yellow;
}

Adjacent sibling selectors

former_element + target_element { style properties }

This is referred to as an adjacent selector or next-sibling selector. It will select only the specified element that immediately follows the former specified element.

REF: https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

$('.slider').slick({    slidesToShow: 3,    slidesToScroll: 1,    dots: true,    infinite: true,    cssEase: 'linear'});

.slider {    width: 650px;    margin: 0 auto;}
img {    width: 150px;    height: 150px;}
.slick-active {  background: red;}
.slick-active + .slick-active {  background: blue;}
.slick-active + .slick-active + .slick-active {  background: yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div class="slider">  <div>    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />  </div>  <div>    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />  </div>  <div>    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />  </div>  <div>    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />  </div>  <div>    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />  </div>  <div>    <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />  </div></div>

Style only the last showing Slick Slider slide?

If you want to accomplish this using JavaScript, you can add a new CSS class ('highlight') to the last slide using the following:

document.querySelector('.your-slick-slideshow').on('init'){
    // Get all of the slide elements
    const slides = document.querySelectorAll('.your-slick-slideshow .slick-slide');

    // If we have some slides
    if (slides.length) {
        // Add the 'highlight' class to the last slide in the list
        slides[slides.length - 1].classList.add('highlight');
    }
});

Of course, you need to replace .your-slick-slideshow with the class corresponding to your slideshow.

Then you just need to add a style for .highlight:

.highlight {
    border: 2px solid orange;
}

Target Active Element in Slick Carousel

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>

Slick.js: Get current and total slides (ie. 3/5)

The slider object contains the slide count as property.

Slick < 1.5

$('.slideshow').slick({
    slide: 'img',
    autoplay: true,
    dots: true,
    dotsClass: 'custom_paging',
    customPaging: function (slider, i) {
        //FYI just have a look at the object to find available information
        //press f12 to access the console in most browsers
        //you could also debug or look in the source
        console.log(slider);
        return  (i + 1) + '/' + slider.slideCount;
    }
});

DEMO

Update for Slick 1.5+ (tested until 1.8.1)

var $status = $('.pagingInfo');
var $slickElement = $('.slideshow');

$slickElement.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
    //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
    var i = (currentSlide ? currentSlide : 0) + 1;
    $status.text(i + '/' + slick.slideCount);
});

$slickElement.slick({
    slide: 'img',
    autoplay: true,
    dots: true
});

DEMO

Update for Slick 1.9+

var $status = $('.pagingInfo');
var $slickElement = $('.slideshow');

$slickElement.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
    //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
    var i = (currentSlide ? currentSlide : 0) + 1;
    $status.text(i + '/' + slick.slideCount);
});

$slickElement.slick({
    autoplay: true,
    dots: true
});

DEMO

Example when using `slidesToShow`

var $status = $('.pagingInfo');
var $slickElement = $('.slideshow');

$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
  // no dots -> no slides
  if(!slick.$dots){
    return;
  }
  
  //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
  var i = (currentSlide ? currentSlide : 0) + 1;
  // use dots to get some count information
  $status.text(i + '/' + (slick.$dots[0].children.length));
});

$slickElement.slick({
  infinite: false,
  slidesToShow: 4,
  autoplay: true,
  dots: true
});

DEMO

How do I update the CSS for the current slide in the Slick carousel?

If all you want to do is change the CSS on the slides, you are over-complicating things - you don't need javascript at all!

CSS-only

You already have classes associated with your slides, so you just need to create rules for those classes, e.g.

.item .nav-nature{ color: purple;}    /* default colour for this element */
.item.active .nav-nature{ color: white;}    /* colour when this item is active */
.item .nav-building{ color: purple;}
.item.active .nav-nature{ color: white;}

jQuery Callback functions for Slick slider

However if you did need to do something in jQuery, slick slider has callback functions beforeChange and afterChange, so you could use those, e.g.

jQuery('#mainslider').on('beforeChange', function(event, slick, currentSlide, nextSlide){

    switch(nextSlide){
        case 1: /* next slide is the first slide */
           [... do something...]
           break;
        case 2: /* second slide */
           [...]
           break;
    }
}

Use Callback to set link colour

If you do need to set the CSS for the links through jQuery, a handy way to do it is to use an array for the colours - the currentSlide and nextSlide are the slide positions, so you can use them as the key to the array, e.g.

CSS - set the default colours for the links

.item .nav-nature{ color: purple;} 
.item .nav-building{ color: purple;}

jQuery - set the colour for the active slide

/* an array of the link colours, corresponding to the slides */
var linkcolours = ["white", "white", "blue", "red", etc...];

jQuery('#mainslider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    /* set the active slide colour to the position of the corresponding slide 
       e.g. get the 1st element from the array (index=0) for slide 1 etc */
    $(".item.active a").css("color", colours[nextSlide-1]);
});

Slick Slider - Hiding additional slides until slider is initialised

You can make use of the :not(.slick-initialized) selector on your carousel like so:

.simple-slider:not(.slick-initialized) .simple-slide-container:after {
    display: none;
}

Note your other CSS rules are targeting .slick-slider even though this element doesn't exist on page load (this is what caught me out the first time), so these effectively do nothing:

.slick-slider:not(.slick-initialized),
.slick-slider:not(.slick-initialized) .slick-slide,
.slick-slider:not(.slick-initialized) .slick-slide .simple-slide-container:after {
    display: none!important;
}

I can't get my Slick slider to work at all

The problem is in the slide setting (element query to select the slider)

For example changing:

$('.fade').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  slide: '> div',
  cssEase: 'linear'
});

$('.fade').slick({
    dots: true,
    infinite: true,
    speed: 700,
    autoplay:true,
    autoplaySpeed: 2000,
    arrows:false,
    slidesToShow: 1,
    slidesToScroll: 1
 });

Works, just play around with the settings.
You were defining slide as > div (inmediate children of div), so if you remove it (defaults to div), it works.

<html>    <head>    <title>My Now Amazing Webpage</title><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.css"/>    </head>    <body>
    <div class="fade">   <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>  <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>    </div>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script><script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.11/slick.min.js"></script>

    <script type="text/javascript">        $(document).ready(function(){       $('.fade').slick({    dots: true,    infinite: true,    speed: 700,    autoplay:true,    autoplaySpeed: 2000,    arrows:false,    slidesToShow: 1,    slidesToScroll: 1 });            });</script>
    </body></html>

Select Second Active Slide in Slickslider Through CSS-Selector