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

Posted 2023-05-08

【中文标题】用于多项目显示的 Bootstrap 4 轮播包装问题

【英文标题】：Bootstrap 4 carousel wrap issue for multi item display

【发布时间】：2020-08-26 07:50:02

【问题描述】：

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

所以我改变的只是：

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

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

【参考方案1】：

发现导致此问题的原因是它生成了 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();