クラスをリストアイテムに追加/削除する

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クリック機能を変更しようとしました方法はありますが、クラスを右矢印と同じリスト方向に追加するか、まったく動作しません。どんな助けでも大歓迎です！ UPDATED

：

は、ここでの問題を示す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を変更します。

は

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

CSSにこれを追加し、すでにそこに子セレクタにこれを追加します。

animation: FadeIn 1s linear;