Bootstrap 4 多项目显示的轮播换行问题

Question

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

所以我只改变了这个：

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

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

Answer 1

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

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

我的解决方案在这里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();
  }
}

Bootstrap 4 多项目显示的轮播换行问题

Bootstrap 4 carousel wrap issue for multi item display

css

jquery

carousel

twitter-bootstrap

bootstrap-4