jQuery addClass example

Change class name on click in jQuery

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slider">
  <div class="item i1"><h3>1</h3></div>
  <div class="item i2"><h3>2</h3></div>
  <div class="item i3"><h3>3</h3></div>
  <div class="item i1"><h3>4</h3></div>
  <div class="item i2"><h3>5</h3></div>
  <div class="item i3"><h3>6</h3></div>
  <div class="item i1"><h3>7</h3></div>
  <div class="item i2"><h3>8</h3></div>
  <div class="item i3"><h3>9</h3></div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

h3 {
  margin: 0;
  padding: 0;
  font-size: 30px;
}

.item { height: 300px; color: #fff; }
.i1 { background: #01005e; }
.i2 { background: #f1645d; }
.i3 { background: #5d145d; }

/* see here: */
.slick-slide { transition: transform 0.5s ease; }
.slick-current + .slick-slide ~ .slick-slide { transform: translateX(-50%); }

JavaScript

$(".slider").slick({
  infinite: true,
	slidesToScroll: 1,
	slidesToShow: 2,
});