添加/删除类以列出项目

Question

所以我用左右导航箭头构建了这个小滑块，但我在尝试向 ul 中的列表项添加 class 时遇到了问题。

基本上我想将 class 添加到列表中的下一项，同时从上一项中删除 class。

现在的问题是，我已经完美地工作了，但只是在正确的方向，而不是向左。

请注意，列表项会在两个方向上正确地自行排序，只是在左侧添加 class 而不是：

$('.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点击功能，但它仍然在与右箭头相同的列表方向添加class，或者只是没有'根本不起作用。非常感谢任何帮助！

更新：

这是一个显示问题的 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;

添加/删除类以列出项目

Adding / Removing classes to list items

javascript

jquery

class

list

slider

添加/删除 类 以列出项目

Adding / Removing classes to list items

javascript

jquery

class

list

slider

添加/删除类以列出项目