CODEWITHSUNDEEP
javascriptjqueryslick.js
Hafiz
Hafiz

Reputation: 55

responsive issue in slick slider?

I am facing issue in slick slider, when it reaches at breakpoint like 990px. it removes background and didn't show any type of error. iconic

And i am using this javascript for responsiveness.

jQuery(document).ready(function(){
    jQuery(".home_carousel").slick({
        dots: false,
        autoplay: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
         responsive: [
            {
              breakpoint: 990,
              settings: {
              slidesToShow: 2
              }
            },
            {
              breakpoint: 668,
              settings: {
             arrows: false,
             centerMode: false,
             slidesToShow: 1
              }
            }
        ]
    });         
});

Upvotes: 1

Views: 2264

Answers (2)

Demo Demo
Demo Demo

Reputation: 82

Remove This css on line 4692 (style.css) After see slider in all media device

@media (max-width: 570px)
style.css?ver=2013-07-18:4692
.home .slider_div {
    /* display: none; */
}

Upvotes: 1

Prasanth S
Prasanth S

Reputation: 535

replace this:

<div class="high_post" style="background: url('http://www.viral.com.my/iconic/wp-content/uploads/2017/11/event.jpg'); ">
<div class="high_post" style="background: url('http://www.viral.com.my/iconic/wp-content/uploads/2017/11/local.jpg'); ">

to

<div class="img1 high_post">
<div class="img2 high_post">
and in css
.img1{
background: url('http://www.viral.com.my/iconic/wp-content/uploads/2017/11/event.jpg');
}
.img2{
background: url('http://www.viral.com.my/iconic/wp-content/uploads/2017/11/local.jpg');
}

similar to this replace all slider. hope this will works if that too not works you can add image by 

if ($(window).width() <= 989) {
$(".img1").css({ 'background': "http://www.viral.com.my/iconic/wp-content/uploads/2017/11/event.jpg" });
}

Upvotes: 1

Related Questions