jQuery addClass example

Change class name on click in jQuery

by ainop

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/jquery.event.move.min.js"></script>
<div class="mainSlider above-header">
  <div class="sliderInner">
    <img src="http://stayclean.ru/images/david-ok.png" alt="" height="100%">
    <div class="rightPart">
      <div class="separator">
        <div class="controls"></div>
      </div>
    </div>
  </div>
</div>

CSS

.mainSlider {
    position: relative;
    z-index: 1;
    height: 365px;
    overflow: hidden;
    color: #fff;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }
    .mainSlider .sliderInner {
    margin-left: -470px;
    position: absolute;
    top: 0;
    left: 50%;
    width: 941px;
    height: 100%;
    }
    .mainSlider .sliderInner > img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -470px;
    }
    .mainSlider .sliderInner .rightPart {
    background: transparent url(http://stayclean.ru/images/david-dirty.png) no-repeat 0px 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: visible! important;
    zoom: 0.849;
    }
    .mainSlider .sliderInner .rightPart .separator {
    border-left: 3px solid #10dbb1;
    background: transparent;
    position: absolute;
    top: 0;
    left: auto;
    width: 3px;
    height: 100%;
    right: -4px;
    }
    .mainSlider .sliderInner .rightPart .separator .controls {
    width: 40px;
    height: 40px;
    left: -21px;
    position: absolute;
    bottom: 19px;
    background: #10dbb1 url(http://stayclean.ru/images/main-slider-controll.png) no-repeat center;
    border-radius: 100%;
}

JavaScript

var mainSlider = $('.mainSlider');
var rightPart = mainSlider.find('.rightPart');

var sliderWidth = mainSlider.find('.sliderInner').width();
var sliderLeft = (sliderWidth - $(window).width()) / 2;

$(window).on('resize', function () {
    sliderWidth = mainSlider.find('.sliderInner').width();
    sliderLeft = (sliderWidth - $(window).width()) / 2;
});

mainSlider.find('.controls').on({
    move: function (e) {
        rightPart.css('width', (sliderLeft + e.pageX) / sliderWidth * 100 + '%');
    },
    moveend: function () {
        rightPart.animate({'width': '50%'},500);
    }
});