jQuery addClass example

Change class name on click in jQuery

by joshmoto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.7.0/js/lightgallery-all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.7.0/css/lightgallery.min.css">
<div class="slick">
  <figure>
    <a href="https://i.imgur.com/q5Y5RCH.png" class="lightgallery">
      <img src="https://i.imgur.com/q5Y5RCH.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/8HjXPXD.png" class="lightgallery">
      <img src="https://i.imgur.com/8HjXPXD.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/vUDcfcy.png" class="lightgallery">
      <img src="https://i.imgur.com/vUDcfcy.png" alt="" />
    </a>
  </figure>
  <figure>
    <a href="https://i.imgur.com/okTDHas.png" class="lightgallery">
      <img src="https://i.imgur.com/okTDHas.png" alt="" />
    </a>
  </figure>
</div>

SCSS

FIGURE {
  margin: 0;
  display: block;
}

IMG {
  width: 100%;
}

.slick {
  width: 100%;
  margin: 0 auto 60px !important;
}

PRE {
  text-align: center;
  margin: 15px 0;
}

JavaScript

// breakpoints
const breakpoint = {
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576,
  // Medium screen / tablet
  md: 768,
  // Large screen / desktop
  lg: 992,
  // Extra large screen / wide desktop
  xl: 1200,
  // Extra extra large screen / full hd
  xxl: 1400
};

// init slick slider
$('.slick').slick({
  dots: true,
  infinite: true,
  autoplay: true,
  speed: 300,
  adaptiveHeight: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  responsive: [{
      breakpoint: breakpoint.sm,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: breakpoint.md,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: breakpoint.lg,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    },
    {
      breakpoint: breakpoint.xl,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    },
    {
      breakpoint: breakpoint.xxl,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 4
      }
    }
  ]
});