Slick.js asNavFor

by kazuya nakagawa

HTML

<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

<!-- slick.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.css">



<div class="slider-for">
   <div><img src="https://marucu.com/wp-content/uploads/2023/04/815297.jpg" alt="image1"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/1072821.jpg" alt="image2"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/7884473.jpg" alt="image3"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/2215317.jpg" alt="image4"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/174276.jpg" alt="image5"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/1681485.jpg" alt="image6"></div>
</div>
<div class="slider-nav">
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/815297.jpg" alt="image1"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/1072821.jpg" alt="image2"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/7884473.jpg" alt="image3"></div>
   <div><img src="https://marucu.com/wp-content/uploads/2023/04/2215317.jpg" alt="image4"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/174276.jpg" alt="image5"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/1681485.jpg" alt="image6"></div>
</div>

CSS

.slider-nav, .slider-for {
  margin: 0 auto;
  width: 50%;
}

.slider-nav {
  display: flex;
  justify-content: space-between;
  margin-top:10px;
}

.slider-for img, .slider-nav img {
  width: 100%;
  height: auto;
}

JavaScript

$('.slider-for').slick({
  autoplay: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  asNavFor: '.slider-nav'
});

$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  centerMode: true,
  focusOnSelect: true
});