首页 文章

将css类添加到页面上所有轮播的所有第一个轮播项目中

提问于
浏览 次
0

我想使用Bootstrap 4的轮播来显示动态内容 . 轮播的第一项需要css类".active" . 实际上这应该直接添加到HTML中，但这对我的动态内容输出有点严重 . 因此，我想通过JavaScript添加它，我找到了这个主题：Appending a class to the first div of a set of dynamically created divs

解决方案是在关闭body标记之前添加以下JavaScript：

$(".carousel-item:first").addClass('active');

这项工作到目前为止，但只有在您的页面上有一个轮播时 . 如果你有更多，这只适用于代码中的第一个轮播 .

我现在做的是在页面上的每个轮播中添加一个自定义类（carousel1，carousel2，carousel3，...），并为每个轮播添加一行到我的JavaScript文件中，如：

$(".carousel-item.carousel1:first").addClass('active');
$(".carousel-item.carousel2:first").addClass('active');
$(".carousel-item.carousel3:first").addClass('active');

BUT: 为了更灵活，是否有JavaScript解决方案，它更通用，每个轮播没有自定义css类？

感谢提前提示和提示 .

巴斯蒂安

javascript carousel bootstrap-4 dynamic-content

2 回答

  • 1

    你需要循环浏览页面上的轮播，并从循环内循环，定位每个轮播的第一个 .carousel-item .

    从BS4文档中抓取HTML并插入3次以模拟实际页面 . CSS只是调出“活动”项目，因为图像显然无法在SO上运行 .

    $(document).ready(function(){
  $('.carousel').each(function(){
    $(this).find('.carousel-item').eq(0).addClass('active');
  });
});

    /* demo only */
.carousel {
  border-bottom: 1px solid #ddd;
  margin-bottom : 2em;
  padding-bottom: 2em;
 }
.carousel-item.active img {
  color: green;
  font-size: 3em;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>
    回复于
  • -1

    你的旋转木马应该有不同的父母，像这样你可以使用第一类型 .

    $(".carousel-item:first-of-type").addClass('active');
    回复于

相关问题