添加/删除类以列出项目

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;