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

我正在创建一个网站来展示我的客户的摄影。 我有几个不同的主要图像，以幻灯片forms旋转。 我希望指向该特定类别的链接在显示相应图像时更改为其他颜色。 我的function完美适用于第一张图像，但它不适用于我的第二张图像。 有人可以阅读我的代码，看看可能有什么问题吗？ 我没有在控制台中出现任何错误，我相信它应该可以工作，因为它与第一个完全相同。 非常感谢！！

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

用于Slick滑块的jQuery Callback函数

但是如果你确实需要在jQuery中做一些事情，那么光滑的滑块在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; } } 

使用Callback设置链接颜色

如果你确实需要通过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 eg get the 1st element from the array (index=0) for slide 1 etc */ $(".item.active a").css("color", colours[nextSlide-1]); });