如何更新Slick carousel中当前幻灯片的CSS？ [英] How do I update the CSS for the current slide in the Slick carousel?
问题描述
我正在创建一个网站来展示我客户的摄影作品。我有几个不同的主要图像在幻灯片中旋转。当显示相应的图像时，我希望指向该特定类别的链接更改为不同的颜色。我的功能对第一张图像非常适用，但不适用于我的第二张图像。有人可以阅读我的代码，看看有什么可能是错的？我没有在控制台中发现任何错误，我相信它应该起作用，因为它的功能与第一个功能完全相同。非常感谢你！
<！ - Photo Slider - >
< div id =maincarouselclass =carousel slidedata-ride =carousel>
< div class =carousel-innerrole =listbox>
< div class =item active>
< / div>
< div class =item>
< / div>
< div class =item>
< img class =d-block img-fluid fashionMainsrc =bppfashion / Eye Eternal.jpg>
< / div>
< div class =item>
< img class =d-block img-fluid productMainsrc =主图像/适当的Prepardness.jpg>
< / div>
< div class =item>
< img class =d-block img-fluid abstractMainsrc =bppabstract / Interconnected.jpg>
< / div>
< div class =item>
< / div>
< div class =item>
< img class =d-block img-fluid graffittiMainsrc =bppgraffitti / Gang'N'em.jpg>
< / div>
< li data-target =＃maincarouseldata-slide-to =0class =active>< / li>
< li data-target =＃maincarouseldata-slide-to =1>< / li>
< li data-target =＃maincarouseldata-slide-to =2>< / li>
< li data-target =＃maincarouseldata-slide-to =3>< / li>
< li data-target =＃maincarouseldata-slide-to =4>< / li>
< li data-target =＃maincarouseldata-slide-to =5>< / li>
< li data-target =＃maincarouseldata-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（{ b $ b 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）;
}）;
函数highlightNatureMain（）{
if（$（。natureMain）。parent（div）。hasClass（active））{
$（'。 nav-nature'）.css（'color'，'purple'）;
}
else {
$（。nav-nature）。css（color，white）;
}
函数highlightBuildingMain（）{
if（$（。buildingMain）。parent（div）。hasClass（active））{
console.log（br）;
$（'。nav-building'）.css（'color'，'purple'）;
}
}
所有你想要做的就是改变幻灯片上的CSS，你过于复杂的东西 - 你根本不需要JavaScript！
$ b $ p
仅限CSS
您已经有了与幻灯片关联的类，因此您只需为这些类创建规则，例如
.item .nav-nature {color：purple;} / *此元素的默认颜色* /
.item.active .nav-nature {color： * /
.item .nav-building {color：purple;}
.item.active .nav-nature {color：white;}
用于滑动滑块的jQuery回调函数
然而，如果您确实需要在jQuery中执行某些操作，则滑动滑块的回调函数 beforeChange 和 afterChange ，所以你可以使用这些，例如
j Query（'＃mainslider'）。on（'beforeChange'，function（event，slick，currentSlide，nextSlide）{
switch（nextSlide）{
case 1：/ * next slide is第一张幻灯片* /
[...做某事...]
break;
案例2：/ *第二张幻灯片* /
[...]
中断;
$ b 使用回拨设置链接颜色 strong>
如果您确实需要通过jQuery为链接设置CSS，那么一个方便的方法是使用数组作为颜色 - currentSlide 和 nextSlide 是滑动位置，因此您可以将它们用作数组的关键字，例如
CSS - 为链接设置默认颜色
.item .nav-nature {color ：purple;}
.item .nav-building {color：purple;}
jQuery - 为活动幻灯片设置颜色
/ *链接颜色数组，对应于幻灯片* /
var linkcolours = [白色，白色，蓝色，红色等等]; $（'＃mainslider'）。on（'beforeChange'，function（event，slick，currentSlide，nextSlide）{
/ *）将活动幻灯片颜色设置为相应的位置幻灯片
例如获取幻灯片1的数组中的第一个元素（index = 0）etc * /
$（。item.active a）.css（color，colors [nextSlide-1 ]）;
}）;
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');
}
}
解决方案 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 carousel中当前幻灯片的CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
