多项目显示的Bootstrap 4 carousel包装问题

Question

我正在玩bootstrap 4旋转木马，正在看这个代码教程。https:/www.codeply.comgoEIOtI7nkP8. 我想尝试阻止旋转木马循环播放相同的幻灯片，当它播放完所有的幻灯片时就停止。我看了一下bootstrap 4关于转盘的文档，它说要使用data-wrap并将其设置为false。

所以我只改了这个。

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

但是当我试着把它设置为false的时候，前一个可以正常工作，但是点击下一个，它仍然会在最后一个项目显示出来后继续前进。我真的不知道为什么会发生这种情况，任何建议都将是巨大的!

Answer 1

发现导致这个问题，因为它生成6个旋转木马项目，其中包含所有的图像，虽然它不会围绕它将通过所有的旋转木马项目的最后一个是图像6。

因此，这个解决方案不是最棒的，但它确实有效。它将使前一个和下一个看不见的时候，最后一个图像内的旋转木马项目是可见的幻灯片。但这并不意味着它是最后一个旋转木马项目。这个解决方案的弱点是，对于我的数学来说，幻灯片的数量必须是静态设置的。我想不出有什么其他的方法来获得动态显示在屏幕上的可见幻灯片的数量。如果有人有任何建议或更好的解决方案，请随时发帖!

我的解决方案在这里 https:/www.codeply.compgTir2SytzH

$('#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();
  }
}