我有一个Slick滑块，其中每个幻灯片都有自己的背景色。我的容器颜色是白色，但是如果要滑动或更改幻灯片，我想使用与幻灯片相同的容器颜色。
我的JS：
if ($("#main-slider").length) {
if (!$("body").hasClass("ie-browser")) {
$("#main-slider .slide").each(function(){
var thisSlide = $(this),
thisImg = thisSlide.find(".slide-img").attr("style");
$("#next-slides").append('<div class="item" style="'+thisImg+'"></div>');
});
}
$("#next-slides .item:first-child").addClass("active");
$("#next-slides .item:nth-child(2)").addClass("next");
$("#next-slides .item:last-child").addClass("prev");
$('#main-slider').on('init', function(slick){
var slides = $('#main-slider .slide').length;
$(".main_slider .count .all").text(pad((slides), 2));
});
$('#main-slider').slick({
arrows: true,
dots: false,
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
swipe: true,
fade: true,
touchMove: true,
draggable: true,
autoplay: false,
speed: 1500,
autoplaySpeed: 20000,
prevArrow: $('.main_slider .arrows .arrow.prev'),
nextArrow: $('.main_slider .arrows .arrow.next'),
responsive: [
{
breakpoint: 1000,
settings: {
speed: 800
}
}
]
});
$('#main-slider').on('afterChange', function(slick, currentSlide){
changeBackground();
}).on('init', function(){
changeBackground();
});
function changeBackground(){
$('.container').css('background-color', $('.slick-active').css('background-color'));
}
$('#main-slider').on('beforeChange', function(event,
slick, currentSlide, nextSlide){
var slides = $('#main-slider .slide').length;
var activeItem = $(".next-slides .item").eq($(slick.$slides[currentSlide]).index());
var nextItem = $(".next-slides .item").eq($(slick.$slides[nextSlide]).index());
changeBackground();
$(".next-slides .item").removeClass("prev");
$(".next-slides .item").removeClass("next");
$(".next-slides .item").removeClass("active");
nextItem.addClass("active");
setTimeout(function () {
nextItem.next().addClass("next");
if (nextItem.is(":last-child")) {
$(".next-slides .item:first-child").addClass("next");
}
}, 300);
activeItem.addClass("prev");
var nextSlide = $(slick.$slides[nextSlide]),
nextSlideIndex = nextSlide.index();
$(".main_slider .count .current").text(pad((nextSlideIndex+1), 2));
});
$(".main_slider .next-slides").on("click", ".next", function(){
$("#main-slider").slick('slickNext');
});
}
目前可以使用，但是容器背景颜色大约在1.5秒后更改。我如何才能立即改变它？
我的HTML（它的无脂肪框架）：
<div class="container" style="background-color: {{@first_color}}">
<include href="layout/top_panel.html">
<div class="mainpage">
<div class="main_slider">
<div class="slider" id="main-slider">
<repeat group="{{@PRODUCTS }}" value="{{@PRODUCT}}">
<div class="slide" style="background-color: {{@PRODUCT.color}}">
<div class="wrap">
<div class="wrap_float">
<div class="slide_left">
<div class="slide_content">
<div class="category"><a href="/product/{{@PRODUCT.id}}">{{@PRODUCT.producer}} | {{@PRODUCT.category_name}}</a></div>
<h2 class="title">
{{ @PRODUCT.name | raw}}
</h2>
<a href="/product/{{@PRODUCT.id}}" class="link">
<span>{{@LANG_79}}</span>
</a>
</div>
</div>
<check if="{{@PRODUCT.image}}">
<true>
<div class="slide_right" data-slide="{{@PRODUCT.thumb}}">
<div class="slide-img" style="background-image: url({{@PRODUCT.thumb}})"></div>
<div class="read_more">
<a href="/product/{{@PRODUCT.id}}">Buy now</a>
</div>
</div>
</true>
<false>
<div class="slide_right" data-slide="{{@NOIMG}}">
<div class="slide-img" style="background-image: url({{@NOIMG}})"></div>
<div class="read_more">
<a href="/product/{{@PRODUCT.id}}">Buy now</a>
</div>
</div>
</false>
</check>
</div>
</div>
</div>
</repeat>
</div>
<div class="controls">
<div class="arrows">
<div class="arrow prev"></div>
<div class="arrow next"></div>
</div>
<div class="count">
<span class="current">01</span> <span class="all">06</span>
</div>
</div>
<div class="next-slides" id="next-slides"></div>
</div>
</div>
</div>
我也可以共享我的PHP函数，该函数可以为每张幻灯片赋予颜色。
我的PHP：
function GET_Home() {
if($this->f3->exists("SESSION.MESSAGE")){
$this->f3->set('MESSAGE',$this->f3->get('SESSION.MESSAGE'));
$this->f3->clear('SESSION.MESSAGE');
}
$this->_pluginRun('before_product_list');
$this->f3->set('NOIMG', $this->f3->get('SITE.url') . '/static/no-img.png');
$this->getProducts(true, 6);
$products = $this->f3->get('PRODUCTS_PLAIN');
$colors = array('#F5FCFE', '#FCEFEF', '#FFF7EC', '#EBECF4', '#E8FFF2', '#FFE1BB');
$k = 0;
foreach($products as $key => &$product){
$product['color'] = $colors[$k];
$k++;
}
$this->f3->set('PRODUCTS', $products);
$this->f3->set('first_color', $colors[0]);
echo \Template::instance()->render('home.html');
}
答案 0 :(得分：1)
您需要使用“ beforeChange”事件，并且在其回调函数中使用第4个参数来检测下一张幻灯片。
$('.slick-slider').slick().on("beforeChange", (event, slick, currentSlide, nextSlide) => {
const nextSlideElelemnt = slick.$slider.find(`[data-slick-index=${nextSlide}]`));
});
答案 1 :(得分：0)
您的1.5秒的延迟来自1500ms的平滑选项中的speed属性。您可以使用事件“ beforeChange”代替“ afterChange”，并且如果更改太快，可以通过css过渡来控制计时
答案 2 :(得分：0)
请尝试使用此代码，要在更改幻灯片时更改包含的背景颜色
该颜色选项具有用于更改整体滑块背景以及滑块文本和链接颜色的选项。但是它没有选项来更改滑块内容的背景颜色。因此，要将其更改为＃888888，您可以在其中添加以下CSS “外观=>自定义=>主题选项=>自定义CSS选项” 框：
#feature-slider .entry-container {
background: #555; /* Solid Color for old Browser */
background: rgba(85,85,85,0.7);
}
我希望这些信息会有用。
谢谢。