Hinzufügen/Entfernen von Klassen zum Auflisten von Elementen

Question

Also habe ich diesen kleinen Schieberegler mit linken und rechten Nav-Pfeilen gebaut und ich habe Probleme mit meinen Versuchen, den Listenelementen in der UL eine Klasse hinzuzufügen.

Grundsätzlich möchte ich eine Klasse zum nächsten Element in der Liste hinzufügen, während diese Klasse aus dem vorherigen Element zur gleichen Zeit entfernt wird.

Jetzt ist die Sache, ich habe das funktioniert perfekt, aber nur in die richtige Richtung, nicht verlassen.

Beachten Sie, dass Listenelemente sich in beide Richtungen richtig sortieren, es ist nur die Klasse auf der linken Seite hinzufügen, die nicht der Fall ist:

$('.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');  
}); 

Ich habe versucht, die #slider_arrow_left in ein paar verschiedene Klickfunktion zu ändern up Wege, aber es fügt immer noch die Klasse in der gleichen Liste Richtung wie der Pfeil nach rechts, oder einfach überhaupt nicht funktioniert. Jede Hilfe wird sehr geschätzt!

AKTUALISIERT:

Hier ist ein JSFiddle das Problem zeigt: Fiddle

Answer 1

Verwenden Sie die CSS-Kind-Selektor. Es wird Ihr Leben in diesem Anwendungsfall erleichtern und Ihren Code reduzieren.

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; 
} 

Auch wenn Sie das erste Kind bekommen müssen, wenn sie einen Sinn hält später im Code verwendet werden.

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

Um Animationen zu tun ändern Sie einfach die CSS.

diese CSS hinzufügen

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

Und dieser Selektor auf das Kind hinzuzufügen schon da.

animation: FadeIn 1s linear;