自建WordPress站点中Slick的Slider Syncing配置的HTML问题求助

我在自己的WordPress站点中使用Slick滑块组件，想要实现它的**Slider Syncing（滑块同步）**功能，但HTML代码结构错误，导致同步效果无法正常实现。

JavaScript #

$('.slide_big').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slide_content'
});
$('.slide_content').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slide_big',
    dots: true,
    centerMode: true,
    focusOnSelect: true
});

CSS #

html,
body {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

.slider {
    width: 50%;
    margin: 100px auto;
}

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-prev:before,
.slick-next:before {
    color: black;
}


.slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
}

.slick-active {
    opacity: .5;
}

.slick-current {
    opacity: 1;
}

.slide_big img {
    box-shadow: 0 0 4px #000;
}

.slide_content img {
    box-shadow: 0 0 4px #000;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>


<section class="MyClass slider">
    <div class="slide_big slider">
         <img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg">
    </div>
    <div class="slide_content">
        <img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg">
    </div>
    <div class="slide_big slider">
         <img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg">
    </div>
    <div class="slide_content">
        <img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg">
    </div>
    <div class="slide_big slider">
         <img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg">
    </div>
    <div class="slide_content">
        <img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg">
    </div>
    <div class="slide_big slider">
         <img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg">
    </div>
    <div class="slide_content">
        <img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg">
    </div>
    <div class="slide_big slider">
         <img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg">
    </div>
    <div class="slide_content">
        <img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg">
    </div>
</section>

你当前的HTML结构错误是同步失效的核心原因：Slick的同步功能要求两个滑块是独立的容器，每个容器内部包含各自的slide项，而非将两个滑块的slide交叉放置在同一个父容器中。

修正后的完整HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>

<!-- 大滑块容器 -->
<div class="slide_big slider">
    <div><img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg"></div>
    <div><img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg"></div>
    <div><img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg"></div>
    <div><img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg"></div>
    <div><img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg"></div>
</div>

<!-- 缩略图导航滑块容器 -->
<div class="slide_content slider">
    <div><img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg"></div>
    <div><img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg"></div>
    <div><img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg"></div>
    <div><img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg"></div>
    <div><img src="https://cbpacs.com/wp-content/uploads/2022/11/Bhediya-Movie-Download-1024x544.jpg"></div>
</div>

修正说明 #

1. 将原来交叉放置的.slide_big和.slide_content项，分别归类到各自的独立容器中，保证两个滑块拥有各自的父容器
2. 每个slide项用<div>包裹（Slick要求每个slide是独立的DOM元素）
3. 你的JS和CSS代码无需修改，只要HTML结构正确，同步功能即可正常生效

内容的提问来源于stack exchange，提问作者Developer