<style>
body {
background: #ccc;
}
.main {
font-family: Arial;
width: 500px;
display: block;
margin: 0 auto;
}
h3 {
background: #fff;
color: #3498db;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
.action {
display: block;
margin: 100px auto;
width: 100%;
text-align: center;
}
.action a {
display: inline-block;
padding: 5px 10px;
background: #f30;
color: #fff;
text-decoration: none;
}
.action a:hover {
background: #000;
}
.slick-slide {
height: auto !important;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<div class="main">
<div class="slider slider-for">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class="slider slider-nav">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
$(".slider-for").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
autoplay: true,
autoplaySpeed: 1000,
speed: 1000,
asNavFor: ".slider-nav"
});
$(".slider-nav").slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: ".slider-for",
dots: true,
focusOnSelect: true
});
$("a[data-slide]").click(function (e) {
e.preventDefault();
var slideno = $(this).data("slide");
$(".slider-nav").slick("slickGoTo", slideno - 1);
});
</script>