jQuery addClass example

Change class name on click in jQuery

HTML

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<div class="carousel-container">
  <div class="carousel__slides">
      <div class="carousel__slide">
        <div class="offset-slide"></div>
      </div>
      <div class="carousel__slide">
        <div class="film-item">
          <div class="film-item__image">
            <img class="w-100" src="http://placekitten.com/510/380" alt="">
          </div>
          <h3>Heading</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
        </div>
      </div>
      <div class="carousel__slide">
          <div class="film-item">
            <div class="film-item__image">
              <img class="w-100" src="http://placekitten.com/510/380" alt="">
            </div>
            <h3>Heading</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
          </div>
      </div>
      <div class="carousel__slide">
          <div class="film-item">
            <div class="film-item__image">
              <img class="w-100" src="http://placekitten.com/510/380" alt="">
            </div>
            <h3>Heading</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat augue at quam ultrices euismod vel ac sapien. Ut finibus posuere augue, eget condimentum nunc porttitor in. Praesent in ornare mi, at rhoncus felis. In iaculis viverra sem sit amet lacinia.</p>
          </div>
      </div>
      <div class="carousel__slide">
         ...

SCSS

/*Flickity Carousel Option*/
.carousel {
    &-container {
        position: relative;
    }
    
    &__slide {
        width: 20%;
        max-width:286px;
        opacity: 0.5;

        &.is-selected {
            opacity: 1;
        }
    }


    &__nav {
        display:block;

        button {
        	width:65px;
            height:50px;
            background:red;
            border-radius:0 100% 100% 0;
            position: absolute;
            top: 80px;
            cursor:pointer;
            border:none;
            outline:0;
            transition-duration: 0.3s;
    		transition-property: all;

            &:hover,
            &:active,
            &:focus {
            	background:green;
                outline:0;
            }

            &:disabled  {
                background:black;
                opacity: 0.5;
            }

            i {
                content:'';
                display:block;
                margin:0 auto;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 10.5px 0 10.5px 14px;
                border-color: transparent transparent transparent white;

            }
        }

        .prev {
            left:0;

            i {
                transform:rotate(180deg);
            }
        }

        .next {
            right:0;
            border-radius:100% 0 0 100%;
        }
    }
}

.film {
    &-section {
        margin-top:50px;
    }
    &-item {
        padding:0 15px;

        p {
            font-size:1.4rem;
            line-height:2.6rem;
            margin-bottom:0;
        }

        &__image {
            position:relative;
        }

        &__play {
            width:65px;
            height:65px;
            border-radius:100% 0 0 0;
            position:absolute;
            right:0;
            bottom:0;
            background:rgba(0,0,0,0.4);
            border:none;
            transition-duration: 0.3s;
           ...

JavaScript

$(document).ready(function () {
  $('.carousel-container').each(function (i, container) {
        var options = {
            cellAlign:'left',
            groupCells:'3',
            pageDots: true,
            prevNextButtons: true
        };

var PrevNextButton = Flickity.PrevNextButton;
    PrevNextButton.prototype.update = function () {
        // index of first or last cell, if previous or next
        var cells = this.parent.cells;

				// enable is wrapAround and at least 2 cells
        if (this.parent.options.wrapAround && cells.length > 1) {
            this.enable();
            return;
        }
        var lastIndex = cells.length ? Math.floor(cells.length/this.parent.slides.length) - 1 : 0;
        var boundIndex = this.isPrevious ? 0 : lastIndex;
         
        var isEnabling;
        //this if not fully tested
        if (this.parent.options.contain) {
            var boundCell = cells[Math.floor(boundIndex*this.parent.slides.length)];
            var selectedCell = cells[Math.floor(this.parent.selectedIndex*this.parent.slides.length)];
             
            isEnabling = selectedCell.target != boundCell.target;
        } else {
        //else should work
            isEnabling = this.parent.selectedIndex != boundIndex;
        }

				var method = isEnabling ? 'enable' : 'disable';
        this[method]();
    };
    
        $('.carousel__slides').flickity(options);
        var $container = $(container);
        var $slider = $container.find('.carousel__slides');
        var flkty = $slider.data('flickity');
        var selectedIndex = flkty.selectedIndex;
        var slideCount = flkty.slides.length;
        var $prev = $container.find('.prev');
        var $next = $container.find('.next');

        // previous
        $prev.on('click', function () {
            $slider.flickity('previous');
        });

        // next
        $next.on('click', function () {
            $slider.flickity('next');
        });
    });
});