时间戳

首页 > 解决方案 > 用于多项目显示的 Bootstrap 4 轮播包装问题

jquery - 用于多项目显示的 Bootstrap 4 轮播包装问题

问题描述

我正在玩 bootstrap 4 carousels，并正在查看此代码教程https://www.codeply.com/go/EIOtI7nkP8。我想尝试阻止旋转木马通过相同的幻灯片回收，并在它通过所有幻灯片时停止。我在 carousels 上查看了 bootstrap 4 的文档，它说要使用 data-wrap 并将其设置为 false。

所以我改变的是：

<div id="recipeCarousel" class="carousel slide w-100" data-wrap="false" data-ride="carousel">

但是，当我尝试将其设置为 false 时，上一个可以正常工作，但是单击下一个它仍然会在显示最后一个项目后继续运行。不太确定为什么会这样，任何建议都会很棒！

标签： jquerycsstwitter-bootstrapbootstrap-4carousel

解决方案

发现导致此问题的问题是因为它生成了 6 个包含所有图像的轮播项目，虽然它不会环绕它，但它会遍历所有轮播项目，其中最后一个是图像 6。

所以解决方案不是最好的，但它确实有效。当轮播项目中的最后一个图像在幻灯片上可见时，它将使上一个和下一个不可见。但这并不一定意味着它是最后一个轮播项目。这个解决方案的弱点是，对于我的数学，幻灯片的数量必须是静态设置的。我想不出任何其他方法来获取动态显示在屏幕上的可见幻灯片的数量。如果有人有任何建议或更好的解决方案，请随时发布！

我的解决方案在这里https://www.codeply.com/p/gTir2SytzH

$('#recipeCarousel').on('slid.bs.carousel', checkSlideWrap);  //for when user click on slides
$('#recipeCarousel').ready(checkSlideWrap);   //for when loading the page so the prev is not displaying
function checkSlideWrap()
{
  var divLength = $('div.carousel-item').length;
  var slides;
  if ($(window).width() >= 992 )
      slides = 3;
  else if ($(window).width() >= 768 )
      slides = 3;
  else
      slides = 1;   

  /*  hide the left and right controls when the carousel is showing the first/last slides */
  var $this = $('#recipeCarousel');
  if ($('.carousel-inner .carousel-item:first').hasClass('active')) {
      // Hide left arrow
      $this.children('.carousel-control-prev.carousel-control').hide();
      // But show right arrow
      $this.children('.carousel-control-next.carousel-control').show();
  } else if ($('.carousel-inner .carousel-item:gt(' + (slides - 1 - divLength) + ')').hasClass('active')) {
      // Hide right arrow
      $this.children('.carousel-control-next.carousel-control').hide();
      // But show left arrow
      $this.children('.carousel-control-prev.carousel-control').show();
  } else {
      $this.children('.carousel-control').show();
  }
}

推荐阅读