jQuery addClass example

Change class name on click in jQuery

HTML

<div style="align: center; background-color: black; margin: 20px 20px; height: 700px">
<div id="myCarousel"></div>
</div>

<script>
$(document).ready(function () {
  var sel = [ ];
  for (var i = 300; i <= 360; i++) 
    sel.push('1sw' + ('' + i).padStart(5, '0'));
  var options = { imageUrl: 'https://pics.r18.com/digital/video/$/$pl.jpg' };
  $('#myCarousel').covercarousel(sel, options);
  $('#myCarousel').bind('openMovie', function (e, javid) { alert('\n\n\nYou clicked ' + javid); });
}); 
</script>

CSS

.covercarousel {
  width: 1200px;
  height: 536px;
  overflow: hidden;
  cursor: auto;
}
.covercarousel-stand {
  width: 40px;
  height: 538px;
  float: left;
  object-fit: cover;
  object-position: -380px 0px;
}
.covercarousel-front {
  height: 538px;
  float: left;
  display: none;
  transform: rotateY(-90deg);
}
.covercarousel-img {
  object-fit: cover;
  object-position: -420px 0px;
}
.covercarousel-text {
  margin-top: -150px;
  z-index: 1;
  color: #ffffff;
  font-size: 34px;
  text-align: center;
  background-color: #666666;
  opacity: 0.7;
  white-space: nowrap;
  cursor: pointer;
}
.covercarousel-item {
  list-style: none;
  padding: 0px 0px !important;
  margin: 0px 0px !important;
}

JavaScript

/*!
 * covercarousel v0.1
 */
(function($) {

  $.easing = $.extend({ }, $.easing, {
    easeOutCubicCover: function(x, t, b, c, d) {
      return c * ((t = t / d - 1) * t * t + 1) + b;
    }
  });

  $.fn.covercarousel = function(json, options) {
    var $el = this;

    $el.html("");
    $el.addClass("covercarousel");

    $el.settings = $.extend({ }, $.fn.covercarousel.defaults, options);

    if (typeof json === "string") 
      json = $.parseJSON(json);

    var $elCarousel = $("<ul>");
    $.each(json, function(idx, javid) {
      var imageUrl = $el.settings.imageUrl.replace(/\$/g, javid);
      var $elItem = $("<li>").addClass("covercarousel-item");
      var $elStand = $("<img>")
        .addClass("covercarousel-stand")
        .attr("draggable", false)
        .data("src", imageUrl)
        .attr("src", "https://upload.wikimedia.org/wikipedia/en/4/48/Blank.JPG");
      var $elCover = $("<div>")
        .addClass("covercarousel-front");
      var $elCoverImg = $("<img>")
        .addClass("covercarousel-img")
        .attr("draggable", false)
        .data("src", imageUrl);
      var $elConverText = $("<div>")
        .addClass("covercarousel-text")
        .data("javid", javid)
        .text(javid);
      $elCover.append($elCoverImg, $elConverText);
      $elItem.append($elStand, $elCover);
      $elCarousel.append($elItem);
    });
    $elCarousel.append( $("<div>").addClass("clearfix").css({ float: "none" }) );
    $elCarousel.appendTo($el);

    $el._curOpen = undefined;
    $el._curDown = false;

    delayLoadImages();

    mouseHandler($el, $elCarousel);
  };

  var setCursor = function($el, val) {
    $el.css({ cursor: val });
  };

  var launchMovie = function($el, $elClicked) {
    var javid = $elClicked.data("javid");
    console.log("launchMovie", javid);
    $el.trigger("openMovie", javid);
  };

  var openBook = function($el, $elCarousel, $elClicked) {
    console.log("openBook");
    var $parent = $elClicked.parent();
    var index =...