Добавление/удаление классов для списка элементов

Question

Итак, я построил этот маленький слайдер с стрелками влево и вправо, и у меня возникли проблемы с попытками добавить класс к элементам списка в ul.

В принципе, я хочу добавить класс к следующему элементу в списке, одновременно удалив этот класс из предыдущего элемента.

Теперь дело в том, что я работаю отлично, но только в правильном направлении, а не влево.

Обратите внимание, что элементы списка сортировки себя должным образом в обоих направлениях, это просто добавить класс слева, который не:

$('.home_slider > li:first').addClass('active-slide'); 

$('#slider_arrow_right').click(function(){ 
    $('.active-slide').next().addClass('active-slide').prev().removeClass('active-slide'); 
    $('.home_slider > li:last').after($('.home_slider > li:first')); 
}); 

$('#slider_arrow_left').click(function(){ 
    $('.home_slider > li:first').before($('.home_slider > li:last')); 
    $('.active-slide').next().addClass('active-slide').prev().removeClass('active-slide');  
}); 

Я попытался изменить вверх функцию #slider_arrow_left нажмите на несколько различных но он по-прежнему добавляет класс в том же направлении списка, что и стрелка вправо, или просто не работает вообще. Любая помощь высоко ценится!

ОБНОВЛЕНО:

Вот JSFiddle показывая вопрос: Fiddle

Answer 1

Используйте селектор ребенка CSS. Это облегчит вашу жизнь в этом случае и уменьшит ваш код.

JavaScript

$('#right').click(function(){ 
    $('.home_slider > li:last').after($('.home_slider > li:first')); 
}); 

$('#left').click(function(){ 
    $('.home_slider > li:first').before($('.home_slider > li:last')); 
}); 

CSS

.nav_buttons{ 
    display:inline-flex; 
    color:#fff; 
    padding:16px; 
} 
#left{ 
    width:40px; 
    height:40px; 
    margin-right:8px; 
    background:grey; 
    padding:4px; 
} 
#right{ 
    width:40px; 
    height:40px; 
    background:grey; 
    padding:4px; 
} 
.home_slider{ 
    display:inline-flex; 
    list-style-type:none; 
} 
.home_slider li{ 
    width:80px; 
    height:80px; 
} 
#one{ 
    background:blue; 
} 
#two{ 
    background:red; 
} 
#three{ 
    background:yellow; 
} 
#four{ 
    background:green; 
} 
.home_slider>li:first-child{ 
    border:8px solid black; 
} 

Кроме того, если вам нужно, чтобы получить первый ребенок, если он имеет какой-либо смысл, который будет использоваться позже в коде.

var firstChild = $('.home_slider li:first-child'); 

Чтобы сделать анимацию, просто измените css.

Добавить это CSS

@keyframes FadeIn { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

И добавьте к этому селектору ребенка уже есть.

animation: FadeIn 1s linear;