jQuery addClass example

Change class name on click in jQuery

by Frisian

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>
<ul class="slick">
<li>
  <div class="slider">
    <div class="slider__item">
      <div class="slider__image">
      
      </div>
    </div>
    <div class="slider__separator"></div>
  </div>
</li>
<li>
  <div class="slider">
    <div class="slider__item">
      <div class="slider__image">
      
      </div>
    </div>
    <div class="slider__separator"></div>
  </div>
</li>
</ul>

SCSS

body{
  background: url('https://images.wallpaperscraft.ru/image/fon_nebo_pyatna_temnyy_65935_1600x1200.jpg')
}
.slider{
  position: relative;
  &__item{
    background: gray;
    height: 300px;
  }
  &__separator{
    height: 50px;
  }
  &__image{
    position: absolute;
    bottom: 0;
    right: 10px;
    width: 300px;
    height: 300px;
    background: green;
  }
}

JavaScript

$('.slick').slick({
 arrows: false,
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
});