Question

我正在尝试创建一个图像滑块，问题是我似乎无法遍历我的图像的div ...

我考虑过创建一个包含所有div并循环遍历它们的数组，但我不知道该怎么做......

此外，我需要在各自的div中居中，垂直和水平对齐图像，我通常使用flexbox这样做，但是在我拥有的内容中，我真的不能使用flexbox。你们可以看看我有什么，也许可以帮助我吗？

$(document).ready(function() {
  var slider = $('.slider-tile');
  var one = slider.first().addClass('active');

  $('.next').click(function() {
    var currentActive = slider.filter(".active");
    var nextNumber = currentActive.next();
    if (nextNumber.hasClass("hidden")) {
      currentActive.removeClass("active").addClass('hidden');
      nextNumber.removeClass('hidden').addClass("active");

      if ($('.slider-tile').last().hasClass('active')) {
        $(currentActive).removeClass('active');
        $('.slider-tile').first().addClass('active').removeClass('hidden');
      }

    }
  });

  $(".prev").click(function() {
    var currentActive = slider.filter(".active");
    var prevNumber = currentActive.prev();
    if (prevNumber.hasClass("hidden")) {
      currentActive.removeClass("active").addClass('hidden');
      prevNumber.removeClass('hidden').addClass("active");
    }
  });
});

.slider {
  width: 500px;
  height: 500px;
  background-color: #a2a2a2;
}
.hidden {
  display: none;
}
.slider-tile {
  width: 100%;
  height: 100%;
  background-color: navy;
  color: white;
  float: left;
}
.slider-tile img {
  max-width: 500px;
  max-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <div class="slider-tile">
    <img src="https://dummyimage.com/600x400/8c2b8c/ffffff" alt="" />
  </div>

  <div class="slider-tile hidden">
    <img src="https://dummyimage.com/600x400/540154/ffffff" alt="" />
  </div>

  <div class="slider-tile hidden">
    <img src="https://dummyimage.com/600x400/8c2b8c/ffffff" alt="" />
  </div>

</div>
<button class="prev">
  <</button>
    <button class="next">></button>

这是我正在研究的PEN。

Answer 1

下一个/上一个导航脚本可以修改为：

（从上一张幻灯片开始 next 时，您可以从第一张幻灯片开始 prev 时返回第一个和另一个方向）

  $('.next').click(function() {
    var currentActive = slider.filter(".active");
    currentActive.removeClass("active").addClass('hidden');
    if (currentActive.is(slider.last())) {
      slider.first().removeClass('hidden').addClass("active");
    } else {
      currentActive.next().removeClass('hidden').addClass("active");
    }
  });

  $(".prev").click(function() {
    var currentActive = slider.filter(".active");
    currentActive.removeClass("active").addClass('hidden');
    if (currentActive.is(slider.first())) {
      slider.last().removeClass('hidden').addClass("active");
    } else {
      currentActive.prev().removeClass('hidden').addClass("active");
    }
  });

您也可以为活动幻灯片创建flexbox，如：

.slider-tile.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

见下面的演示：

$(document).ready(function() {
  var slider = $('.slider-tile');
  var one = slider.first().addClass('active');

  $('.next').click(function() {
    var currentActive = slider.filter(".active");
    currentActive.removeClass("active").addClass('hidden');
    if (currentActive.is(slider.last())) {
      slider.first().removeClass('hidden').addClass("active");
    } else {
      currentActive.next().removeClass('hidden').addClass("active");
    }


  });

  $(".prev").click(function() {
    var currentActive = slider.filter(".active");
    currentActive.removeClass("active").addClass('hidden');
    if (currentActive.is(slider.first())) {
      slider.last().removeClass('hidden').addClass("active");
    } else {
      currentActive.prev().removeClass('hidden').addClass("active");
    }

  });
});

.slider {
  width: 500px;
  height: 500px;
  background-color: #a2a2a2;
}
.hidden {
  display: none;
}
.slider-tile {
  width: 100%;
  height: 100%;
  background-color: navy;
  color: white;
  float: left;
}
.slider-tile img {
  max-width: 500px;
  max-height: 500px;
}
.slider-tile.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <div class="slider-tile">
    <img src="https://dummyimage.com/600x400/8c2b8c/ffffff" alt="" />
  </div>

  <div class="slider-tile hidden">
    <img src="https://dummyimage.com/600x400/540154/ffffff" alt="" />
  </div>

  <div class="slider-tile hidden">
    <img src="https://dummyimage.com/600x400/8c2b8c/ffffff" alt="" />
  </div>

</div>
<button class="prev">
  <</button>
    <button class="next">></button>

自定义图像滑块无法正常工作

1 个答案: