如何為Slick輪播中的當前幻燈片更新CSS？

Question

我正在創建一個網站來展示客戶的攝影作品。 我有幾個不同的主圖像在幻燈片中旋轉。 我希望顯示該特定圖像的鏈接時，該特定類別的鏈接可以更改為其他顏色。 我的功能非常適合第一張圖片，但不適用於我的第二張圖片。 有人可以閱讀我的代碼，看看有什么問題嗎？ 我沒有在控制台中遇到任何錯誤，並且我相信它應該可以正常工作，因為它實際上與第一個功能相同。 非常感謝！！

<!-- 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

如果您要做的只是更改幻燈片上的CSS，就使事情變得過於復雜-根本不需要JavaScript！

僅CSS

您已經有與幻燈片關聯的類，因此只需要為這些類創建規則，例如

.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回調函數

但是，如果您確實需要在jQuery中afterChange ，那么光滑的滑塊具有回調函數beforeChange和afterChange ，因此您可以使用它們，例如

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

使用回調設置鏈接顏色

如果您確實需要通過jQuery設置鏈接的CSS，那么一種簡便的方法是使用顏色數組currentSlide和nextSlide是幻燈片位置，因此您可以將它們用作數組的鍵，例如

CSS-設置鏈接的默認顏色

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

jQuery-設置活動幻燈片的顏色

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