如何为Slick轮播中的当前幻灯片更新CSS？

Question

I'm creating a site to showcase my client's photography. I have several different main images that rotate in a slideshow. I want the link to that specific category to change to a different color when it's corresponding image is shown. My function works perfectly for the 1st image but it won't work for my second one. Can someone read my code and see what may be wrong? I'm not getting any errors in the console and I believe it should work since it's literally the same function as the first one. Thank you so much!!

<!-- Photo Slider -->
        <div id="maincarousel" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img class="d-block img-fluid natureMain" src="bppnature/Hope.jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid buildingMain" src="bppbuildings/here comes the sun (around the way).jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid fashionMain" src="bppfashion/Eye Eternal.jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid productMain" src="Main Images/Proper Prepardness.jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid abstractMain" src="bppabstract/Interconnected.jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid coverMain" src="bppcoverart/Black EGYptian BastARD (right).jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid graffittiMain" src="bppgraffitti/Gang'N'em.jpg">
            </div>
            <ol class="carousel-indicators">
                <li data-target="#maincarousel" data-slide-to="0" class="active"></li>
                <li data-target="#maincarousel" data-slide-to="1"></li>
                <li data-target="#maincarousel" data-slide-to="2"></li>
                <li data-target="#maincarousel" data-slide-to="3"></li>
                <li data-target="#maincarousel" data-slide-to="4"></li>
                <li data-target="#maincarousel" data-slide-to="5"></li>
                <li data-target="#maincarousel" data-slide-to="6"></li>
              </ol>
          </div>
        </div>

$(document).ready(function(){
                // $("#mainslider").slick({
                //   infinite: true,
                //   slidesToShow: 1,
                //   slidesToScroll: 1,
                //   centerMode: true,
                // //   autoplay: true,
                // //   autoplaySpeed: 2000,
                //   pauseOnHover: true
                // });
                highlightNatureMain();
                highlightBuildingMain();
                $('.slickcarousel').slick({
                  infinite: true,
                  slidesToShow: 4,
                  slidesToScroll: 1,
                  centerMode: true,
                //   autoplay: true,
                //   autoplaySpeed: 2000,
                  pauseOnHover: true
                });
                carouselDisplay();
                // animationNature();
                // animationBuilding();
                // animationFashion();
                // animationProducts();
                // animationAbstract();
                // animationCovers();
                // animationGraffiti();
                // animationProjects();
                // stopHover();
                // imageHover();
                setInterval(function(){ nameFlash();}, 3000);

            });

function highlightNatureMain() {
                if ($(".natureMain").parent("div").hasClass("active")) {
                    $('.nav-nature').css('color', 'purple');
                }
                else {
                    $(".nav-nature").css("color","white");
                }
            }
            function highlightBuildingMain() {
                if ($(".buildingMain").parent("div").hasClass("active")) {
                    console.log("br");
                    $('.nav-building').css('color', 'purple');
                }
            }

Answer 1

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, eg

.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, eg

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, eg

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]);
});