Change container background color on slide change in Slick slideshow

Question

I have a Slick slider where each slide has its own background color. My container color is white, but I want to use a container color that's the same as the slide if swiping or changing slides.

My 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');    
        });
    }

At the moment it works, but the container background color changes about 1.5 seconds later. How I can get it to change instantly?

My HTML (Its Fat-Free framework):

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

I can share my PHP function also where it gives color for each slide.

MY 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');
    }

Answer 1

Your Delay of 1.5 seconds comes from your speed property in the slick options with 1500ms. You can use the event "beforeChange" instead of "afterChange" and control your timing with css transitions if the change is too fast

Answer 2

You need to use "beforeChange" event and inside its callback function use 4th argument to detect the next slide.

$('.slick-slider').slick().on("beforeChange", (event, slick, currentSlide, nextSlide) => {
    const nextSlideElelemnt = slick.$slider.find(`[data-slick-index=${nextSlide}]`));
});

Codepen demo: https://codepen.io/rohitutekar/pen/BaKgPVK

Answer 3

Please try this code,To Change containe background color on slide change

That color option have option to change the overall slider background and the slider text and link color. But it doesn’t have option to change the slider content background color. So, to change that to #888888, you can add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:

#feature-slider .entry-container {
    background: #555; /* Solid Color for old Browser */
    background: rgba(85,85,85,0.7);
}

I hope this information will be useful.

Thank you.