为什么卡片滑块只循环显示前 3 张卡片而不是其余卡片？

Question

我正在尝试实现 Shamla 在此 link

上 codepen 上创建的 Pen 中的一个想法

但是我注意到卡片只循环显示前 3 张，不会进入第四张。

我知道它可能在 javascript 但不知道是哪一部分。

非常感谢您帮助卡片循环所有项目。

谢谢。请看下面的代码。

$(document).ready(function() {
  let sliderItem = $(".slider").children(".item.active");
sliderItem.prev(".item").css({
  left: -200
});

sliderItem.next(".item").css({
  right: -200
});
let i = $(".slider").children(".item");
let ind = 0;
$(".slider")
  .children(".item")
  .each(function() {
    $(this).attr("data-index", ind++);
  });
i.on("click", function(e) {
  const that = $(this);
  let dataIndex = that.data("index");
  $(".item").removeClass("active");
  that.addClass("active");
  i.each(function() {
    if ($(this).data("index") == dataIndex) {
      $(this).addClass("active");
      $(this).css({
        left: 0,
        right: 0,
        "z-index": 3
      });
      if (dataIndex == "1") {
        $(".item[data-index=2]").css({
          left: 0,
          right: -200,
          "z-index": 1
        });
        $(".item[data-index=0]").css({
          left: -200,
          right: 0,
          "z-index": 1
        });
      } else if (dataIndex == "0") {
        $(".item[data-index=2]").css({
          left: -200,
          right: 0,
          "z-index": 1
        });
        $(".item[data-index=1]").css({
          left: 0,
          right: -200,
          "z-index": 1
        });
      } else if (dataIndex == "2") {
        $(".item[data-index=1]").css({
          left: -200,
          right: 0,
          "z-index": 1
        });
        $(".item[data-index=0]").css({
          left: 0,
          right: -200,
          "z-index": 1
        });
      }
    }
  });
});

});

body {
  background: #c0b5f5;
}

.slider {
  width: 75%;
  height: 80%;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 50px;
}
.slider .item {
  height: 100%;
  width: 100%;
  position: absolute;
  background: #fff;
  border-radius: 10px;
  transition: all ease 0.7s;
  z-index: 1;
  left: 0;
  opacity: 0.7;
  transform: scale(0.8);
  right: 0;
  margin: 0 auto;
}
.slider .item.active {
  z-index: 2;
  opacity: 1;
  background: #fff;
  transform: scale(1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='slider'>
  <div class='item'>
    1
  </div>
  <div class='item active'>
    2
  </div>
  <div class='item'>
    3
  </div>
  <div class='item'>
    4
  </div>
  <div class='item'>
    5
  </div>
  <div class='item'>
    6
  </div>
</div>

Answer 1

是因为if cases。 if cases 不会针对滑块中超过 3 个项目进行动态调整。您可以做的是为索引高于 2 的情况添加更多 if 案例。如果将此代码添加到最后一个 if 案例，将显示第 4 项。您将需要一种算法来计算所有其他幻灯片项目的新位置。您提供的代码只涵盖了 3 个项目的案例。

    ...

    else if(dataIndex=="2"){
            $(".item[data-index=1]").css({
              "left":-200,
              "right":0,
              "z-index":1,
            })
            $(".item[data-index=3]").css({
              "left":0,
              "right":-200,
              "z-index":1,
            })
    ...

Answer 2

看来您的代码过于复杂了。您正在尝试为每个活动索引设置每张幻灯片的样式。手动执行此操作可能是一项艰巨且容易出错的任务。我建议你让 CSS 为你辛勤工作。

我将向您介绍两个您可能还不熟悉的 selector，如果您跳过这一点。 +（相邻兄弟 selector）将 select 加号之后的直接元素。并且 ~（一般兄弟 select 或）将 select 波浪线后的所有兄弟。所以举个例子。

h1 + p{
  ...
}

这将select直接在同一级别的 h1 之后出现的 p。

h1 ~ p {

}

这将 select 所有 p 在同一级别上出现在 h1 之后。使用这些 selector，您可以有条件地设置元素的样式。

因此，在您的滑块中，您希望在活动幻灯片之前的所有项目都位于左侧。所以我们设置 CSS 这样每张幻灯片的默认位置都在左侧。

.item {
  left: -200px;
  right: 0;
}

现在 .active 幻灯片必须居中。所以那个幻灯片要失去左右位置了

.item.active {
  left: 0;
  right: 0;
}

从这里开始，我们将使用 selector。我们希望在 .active 幻灯片之后的所有幻灯片都向右移动。我们用 ~ selector.

.item.active ~ .item {
  right: -200px;
  left: 0;
}

现在您所有的幻灯片都应该有正确的样式并且不需要 JS 将它们移动到正确的位置。作为画龙点睛之笔，您需要隐藏 .active 项目之后的所有项目。满口的，不过还是看看吧

.item.active + .item ~ .item {
  opacity: 0;
  visibility: hidden;
}

CSS 比你想象的更强大。我建议您仅在进行无法在 CSS.

中完成的计算时使用 JavaScript 来操作 CSS

查看下面的代码片段以查看它的实际效果。还可以考虑使用不透明背景，因为您的项目会重叠。因此，模拟透明度的阴影也可以。

希望这对您有所帮助。如果我不清楚或者您还有其他问题，请告诉我。

祝你好运！

$(document).ready(function() {

  let $slider = $(".slider");
  let sliderItem = $slider.children(".item.active");
  let i = $slider.children(".item");
  let ind = 0;
  
  $slider
    .children(".item")
    .each(function() {
      $(this).attr("data-index", ind++);
    });
    
  i.on("click", function(e) {
    const that = $(this);
    let dataIndex = that.data("index");
    $(".item").removeClass("active");
    that.addClass("active");
  });

});

body {
  background: #c0b5f5;
}

.slider {
  width: 75%;
  height: 80%;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 50px;
}

.slider .item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: absolute;
  background: #ede9ff;
  border-radius: 10px;
  transition: all ease 0.7s;
  z-index: 1;
  left: 0;
  transform: scale(0.8);
  left: -200px;
  right: 0;
  margin: 0 auto;
  
}

.slider .item.active {
  left: 0;
  right: 0;
  z-index: 2;
  opacity: 1;
  background: #fff;
  transform: scale(1);
}

.slider .item.active ~ .item {
  left: 0;
  right: -200px;
}

.slider .item.active + .item ~ .item {
  opacity: 0;
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='slider'>
  <div class='item'>
    1
  </div>
  <div class='item active'>
    2
  </div>
  <div class='item'>
    3
  </div>
  <div class='item'>
    4
  </div>
  <div class='item'>
    5
  </div>
  <div class='item'>
    6
  </div>
</div>

为什么卡片滑块只循环显示前 3 张卡片而不是其余卡片？

Why does the Card slider loop through just the first 3 and not the remaining cards?

javascript

slider

carousel