jQuery addClass example

Change class name on click in jQuery

by probablybest

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: false,
            prevNextButtons: false
        };

        $('.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');
        });

        $slider.on( 'select.flickity', function() {

            // enable/disable previous/next buttons
            if ( !flkty.cells[ flkty.selectedIndex - 1 ] ) {
              $prev.attr( 'disabled', 'disabled' );
              $next.removeAttr('disabled'); // <-- remove disabled from the next
            } else if ( !flkty.cells[ flkty.selectedIndex +1 ] ) {
              $next.attr( 'disabled', 'disabled' );
              $prev.removeAttr('disabled'); //<-- remove disabled from the prev
            } else {
              $prev.removeAttr('disabled');
              $next.removeAttr('disabled');
            }
        });
    });
});