jQuery addClass example

Change class name on click in jQuery

by Artem Borovikov

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<script src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<div class="slider-for">
    <div class="slide-item">
        <div class="slider-for2">
            <div class="slide-item">
                slide for 2 item 1
            </div>
            <div class="slide-item">
                slide for 2 item 2
            </div>
            <div class="slide-item">
                slide for 2 item 3
            </div>
        </div>
        
        <div class="slider-nav2">
            <div class="slide-item">
                slide nav 2 item 1
            </div>
            <div class="slide-item">
                slide nav 2 item 2
            </div>
            <div class="slide-item">
                slide nav 2 item 3
            </div>
        </div>
    </div>
    <div class="slide-item">
       2
    </div>
    <div class="slide-item">
        3
    </div>
</div>

<div class="slider-nav">
    <div class="slide-item">
        nav 1
    </div>
    <div class="slide-item">
        nav 2
    </div>
    <div class="slide-item">
        nav 3
    </div>
</div>

JavaScript

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

$('.slider-for2').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav2'
});

$('.slider-nav2').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for2',
  dots: false,
  centerMode: false,
  focusOnSelect: true
});