Carousel Bootstrap 5：从 JQuery 到 Javascript

Posted 2023-05-08

技术标签:

【中文标题】Carousel Bootstrap 5：从 JQuery 到 Javascript【英文标题】：Carousel Bootstrap 5: JQuery to Javascript 【发布时间】：2021-06-12 17:59:38 【问题描述】：

我需要一个引导 5 轮播，显示多个项目并一次滑动一个。我所需要的只是将 Jquery 代码翻译成纯 javascript。然后我可以删除 jquery 依赖项。我找到了这个solution does the job，很轻，而且可以理解。所以这正是我所需要的，除了它依赖于 Jquery。 DEMO

完整代码

$('.carousel .carousel-item').each(function() 
  var minPerSlide = 4;
  var next = $(this).next();
  if (!next.length) 
    next = $(this).siblings(':first');
  
  next.children(':first-child').clone().appendTo($(this));

  for (var i = 0; i < minPerSlide; i++) 
    next = next.next();
    if (!next.length) 
      next = $(this).siblings(':first');
    

    next.children(':first-child').clone().appendTo($(this));
  
);

@media (min-width: 768px) 
  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next 
    transform: translateX(50%);
  
  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev 
    transform: translateX(-50%);
  


@media (min-width: 992px) 
  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next 
    transform: translateX(33%);
  
  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev 
    transform: translateX(-33%);
  


@media (max-width: 768px) 
  .carousel-inner .carousel-item>div 
    display: none;
  
  .carousel-inner .carousel-item>div:first-child 
    display: block;
  


.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev 
  display: flex;


.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left 
  transform: translateX(0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">


<div class="container text-center">
  <div class="row mx-auto my-auto">
    <div id="myCarousel" class="carousel slide carousel-dark w-100" data-bs-ride="carousel" data-bs-interval="2000">
      <div class="carousel-inner w-100" role="listbox">
        <div class="carousel-item active">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=1">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=2">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=3">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=4">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=5">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="http://placehold.it/350x180?text=6">
          </div>
        </div>
      </div>
      <a class="carousel-control-prev bg-dark w-auto" href="#myCarousel" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next bg-dark w-auto" href="#myCarousel" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

【问题讨论】：

您给出的示例是使用引导程序.on('slide.bs.carousel')。您也需要转换该框架（关于 UX 问题的离题）这个例子似乎是一个关于如何制作轮播的非常糟糕的例子...... 【参考方案1】：

转换版本

const minPerSlide = 4;
const parent = document.querySelector(".carousel-inner");

document.querySelectorAll('.carousel-item').forEach(function(item) 
  let next = item.nextElementSibling;
  if (!next) 
    next = parent.querySelector(".carousel-item");
  
  let clone = next.querySelector("div").cloneNode(true);
  item.appendChild(clone)

  for (var i = 0; i < minPerSlide; i++) 
    next = next.nextElementSibling;
    if (!next) 
      next = parent.querySelector(".carousel-item");
    
    clone = next.querySelector("div").cloneNode(true);
    item.appendChild(clone)
  
);

@media (min-width: 768px) 
  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next 
    transform: translateX(50%);
  
  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev 
    transform: translateX(-50%);
  


@media (min-width: 992px) 
  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next 
    transform: translateX(33%);
  
  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev 
    transform: translateX(-33%);
  


@media (max-width: 768px) 
  .carousel-inner .carousel-item>div 
    display: none;
  
  .carousel-inner .carousel-item>div:first-child 
    display: block;
  


.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev 
  display: flex;


.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left 
  transform: translateX(0);

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">

<div class="container text-center">
  <div class="row mx-auto my-auto">
    <div id="myCarousel" class="carousel slide carousel-dark w-100" data-bs-ride="carousel" data-bs-interval="2000">
      <div class="carousel-inner w-100" role="listbox">
        <div class="carousel-item active">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="https://via.placeholder.com/350x180?text=1">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="https://via.placeholder.com/350x180?text=2">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="https://via.placeholder.com/350x180?text=3">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="https://via.placeholder.com/350x180?text=4">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="https://via.placeholder.com/350x180?text=5">
          </div>
        </div>
        <div class="carousel-item">
          <div class="col-lg-4 col-md-6">
            <img class="img-fluid" src="https://via.placeholder.com/350x180?text=6">
          </div>
        </div>
      </div>
      <a class="carousel-control-prev bg-dark w-auto" href="#myCarousel" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next bg-dark w-auto" href="#myCarousel" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

【讨论】：

这正是我的意思。现在我必须将它与 Bootstrap 5 集成，因为 codeply 示例以 bootstrap 4 作为基础框架。我看到这个解决方案的唯一问题是，当显示最后两张幻灯片时，它没有显示正确的幻灯片。我打赌它与 if (!next.length) next = $(this).siblings(':first'); 关于原始代码，你怎么看？我要感谢你帮助我你能给我看一个带有 bootstrap 5 的 codeply 吗？您发布的 codeply 中没有 if (!next.length) next = $(this).siblings(':first'); 代码演示：jqueryscript.net/demo/… 这就像一个魅力，现在社区可以享受一个奇妙的引导 5 轮播，其中包含多个项目并一次滑动一个，并且......没有 jquery 依赖。 :) 非常感谢您的努力和快速响应，这是社区有多好的一个例子。再次感谢。

以上是关于Carousel Bootstrap 5：从 JQuery 到 Javascript的主要内容，如果未能解决你的问题，请参考以下文章

如何让 Bootstrap 5 Carousel 滑动得更快？

html 从ACF数据拉出的Bootstrap Carousel

css 从Bootsnip延伸的Carousel的叉子与Bootstrap 3.2玩得很好

Bootstrap Carousel 从外部链接转到幻灯片

Bootstrap Carousel - 动画和边距问题