jQuery addClass example

Change class name on click in jQuery

HTML

<div class="widget main-pro-users">
        <div class="body">
         <div class="carousel-arrow-left"><span>Влево</span></div>
    <div class="widget_profiles_list list">
        
        
            
            <div class="item">
                <div class="image">
                    <a href="/users/1" title="1а">
                        <img src="/b5842915.png" alt="1" title="Тех 1">                    </a>
                </div>
                                    <div class="info">
                        <div class="name">
                            <a href="/users/1">1</a>
                        </div>
                                                    <div class="fields">
                                                                    <div class="field ft_string f_specialisation">
                                                                                
                                    </div>
                                                            </div>
                                            </div>
                            </div>

        
            
            <div class="item">
                <div class="image">
                    <a href="/users/7" title="Компания 1">
                        <img src="/upload/000/u7/001/cda4eae6.jpg" alt="Компания 1" title="Компания 1">                    </a>
                </div>
                                    <div class="info">
                        <div class="name">
                            <a href="/users/7">Компания 1</a>
                        </div>
                                            </div>
                            </div>

        
            
            <div class="item">
                <div class="image">
                    <a href="/users/5" title="Алексей Б.">
                        <img src="/upload/default/avatar_small.jpg" alt="Алексей Б." title="Алексей Б.">                    </a>
                </div>
                              ...

CSS

.main-pro-users {
background: #45c77f;
text-align:center;
}
.main-pro-users .body	{
position:relative;
max-width: 990px;
overflow: hidden;
}

.main-pro-users .widget_profiles_list {
width: 10000px;
position: relative;}

.main-pro-users .widget_profiles_list.list .item {
padding: 0 0 10px 0;
float:left;
box-sizing: border-box;
overflow: hidden;
display: inline-block;
width: 145px;
margin: 0px 10px;

}

.main-pro-users .widget_profiles_list.list .item .name{    padding: 15px 0px 10px 0px;
}

.main-pro-users .widget_profiles_list .item .image img, .item-avatar > img {
display: block;
width: 64px;
height: 64px;
}

.main-pro-users .widget_profiles_list.list .item .info {
position: relative;
background: #fff;
margin-top: 25px;
}

.main-pro-users .info .name a{
    font-weight: 700;
    text-decoration: none;
    color: #444;
}

.carousel-arrow-left, .carousel-arrow-right {
    float: left;
    display: block;
    border: 1px solid grey;
    background-color: lightgrey;
    padding: 5px;
    margin-top: 50px;
}
 
.carousel-arrow-left:hover, .carousel-arrow-right:hover {
    cursor: pointer;
    background-color: grey;
}
 
.carousel-arrow-left {
    margin-right: 25px;
}
 
.carousel-arrow-right {
    margin-left: 25px;
}

JavaScript

$(document).ready(function() {
var leftUIEl = $('.carousel-arrow-left');
var rightUIEl = $('.carousel-arrow-right');
var elementsList = $('.body');

var pixelsOffset = 145;
var currentLeftValue = 0;
var elementsCount = elementsList.find('.item').length;
var minimumOffset = ((elementsCount — 5) * pixelsOffset);
var maximumOffset = 0;

leftUIEl.click(function() {
if (currentLeftValue != maximumOffset) {
currentLeftValue += 145;
elementsList.animate({ left : currentLeftValue + "px"}, 500);
} else {
currentLeftValue = minimumOffset;
elementsList.animate({ left : currentLeftValue + "px"}, 500);
}
});

rightUIEl.click(function() {
if (currentLeftValue != minimumOffset) {
currentLeftValue -= 145;
elementsList.animate({ left : currentLeftValue + "px"}, 500);
} else {
currentLeftValue = 0;
elementsList.animate({ left : currentLeftValue + "px"}, 500);
}
});

});