jQuery addClass example

Change class name on click in jQuery

by der_robert

HTML

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="wrap">
  <div class="text">
    <span class="slidetext" id="s1">SLIDE-1</span>
    <span class="slidetext" id="s2">SLIDE-2</span>
    <span class="slidetext" id="s3">SLIDE-3</span>
  </div>
  <div class="window">
  
    <div id="carousel">
      <span class="slide" id="b1">
      1
        <img src="https://beta2.cuffed.at/wp-content/uploads/2019/08/cuffed_misterb-glide_01.jpg">
      </span>
      <span class="slide" id="b2">
      2
        <img src="https://beta2.cuffed.at/wp-content/uploads/2019/08/cuffed_misterb-glide_02.jpg">
      </span>  
      <span class="slide" id="b3">
      3
        <img src="https://beta2.cuffed.at/wp-content/uploads/2019/08/cuffed_misterb-glide_03.jpg">
      </span>
    </div>
  </div>
  <span id="prev">PREV</span>
  <span id="next">NEXT</span>
</div>

CSS

.wrap {
  position: relative;
  width: 1140px;
  max-width: 1140px;
  height: 800px;
  margin: 0 auto;
}

.text{
  width: 50%;
  float: left;
}

.window {
  overflow: hidden;
  position: relative;
  background: #222;
  width: 50%;
}

#carousel {
  width: 10000px;
  position: relative;
  top: 0;
  left: -500px;
}

.slide {
  height: 800px;
  width: 500px;
  cursor: pointer;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.slide img{
  width: 100%;
}

/*
.slide#b1 {
  background: #556270;
}

.slide#b2 {
  background: #4ECDC4;
}

.slide#b3 {
  background: #9CE462;
}

.slide#b4 {
  background: #FF6B6B;
}

.slide#b5 {
  background: #C44D33;
}
*/

#prev, #next {
  cursor: pointer;
  position: absolute;
  bottom: -40px;
  font-size: 14pt;
}

#prev {
  left: 0;
}

#next {
  right: 0;
}

.transition {
  transition: .7s;
}

JavaScript

var carousel = $('#carousel'),
    threshold = 150,
    slideWidth = 500,
    dragStart, 
    dragEnd;

$('#next').click(function(){ shiftSlide(-1) })
$('#prev').click(function(){ shiftSlide(1) })

carousel.on('mousedown', function(){
  if (carousel.hasClass('transition')) return;
  dragStart = event.pageX;
  $(this).on('mousemove', function(){
    dragEnd = event.pageX;
    $(this).css('transform','translateX('+ dragPos() +'px)')
  })
  $(document).on('mouseup', function(){
    if (dragPos() > threshold) { return shiftSlide(1) }
    if (dragPos() < -threshold) { return shiftSlide(-1) }
    shiftSlide(0);
  })
});

function dragPos() {
  return dragEnd - dragStart;
}

function shiftSlide(direction) {

  if (carousel.hasClass('transition')) return;
  dragEnd = dragStart;
  $(document).off('mouseup')
  carousel.off('mousemove')
          .addClass('transition')
          .css('transform','translateX(' + (direction * slideWidth) + 'px)'); 
  setTimeout(function(){
    if (direction === 1) {
      $('.slide:first').before($('.slide:last'));
    } else if (direction === -1) {
      $('.slide:last').after($('.slide:first'));
    }
    carousel.removeClass('transition')
		carousel.css('transform','translateX(0px)'); 
  },1000)
  
  console.log(this);
  
}