光滑滑块中的响应问题？答案

【问题标题】：responsive issue in slick slider?光滑滑块中的响应问题？
【发布时间】：2018-09-03 21:01:21
【问题描述】：

当滑杆到达breakpoint 时，我遇到了问题，比如990px。它删除了背景并且没有显示任何类型的错误。 iconic

我正在使用这个 javascript 进行响应。

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
              }
            }
        ]
    });         
});

【问题讨论】：

您正在调用内联图像，尝试使用另一个类添加图像。光滑的滑块将内联样式删除到 "_.$slider.children().children().children() .css({ 'width':(100 / _.options.slidesPerRow) + '%', 'display': '内联块' });"

标签： javascript jquery slick.js

【解决方案1】：

Remove This css on line 4692 (style.css) 在所有媒体设备中查看滑块后

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

【讨论】：

即使在 989px 也会出现问题，那么这将如何工作。？
使用字体大小：100%；在 CSS 媒体查询中
在 feelancer 上创建项目

【解决方案2】：

替换这个：

<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'); ">

到

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

类似于这个替换所有滑块。希望这会奏效如果这也不起作用，您可以通过

添加图像

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

【讨论】：

实际上这些是缩略图，我正在使用 wordpress 那么如何在 css 中调用它。