I want to use a ready-made slider in the form of a WordPress site that I have designed for myself. For this purpose, I have used the following site ready sliders:
https://kenwheeler.github.io/slick/
I want to use (Slider Syncing) among the ready sliders of this site, but I can’t fix the HTML part.
All the codes I have used for this slider:
$('.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
});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;
}<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>>Solution :
I have personally used slick slider for many years. Great stuff.
So I can see you have trouble understanding how to declare what should be a slider.
The $(‘.class-here’).slick() in the jQuery part refers to the parent wrapper of the slides, not the slides themself.
So in order to make a slick slider, you would have to declare the wrapper of the slides here.
Now in order to make the slider syncing work, you need 2 sliders. 1 being the main and one being the navigation slider.
I have edited your code to do this exactly.
Inspect it and you will find I have created 2 parent wrappers and in the jQuery, they are linked with the "asNavFor".
I hope it makes sense, if not, then feel free to ask.
Good luck!
$('.slider_main').slick({
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.slider_nav',
arrows: false,
fade: true,
});
$('.slider_nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider_main',
dots: true,
centerMode: true,
focusOnSelect: true
});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;
}<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_main">
<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>
</section>
<section class="slider_nav">
<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>