使用 Jquery 的 Bootstrap 4 动态轮播

Posted 2023-05-08

【中文标题】使用 Jquery 的 Bootstrap 4 动态轮播

【英文标题】：Bootstrap 4 Dynamic Carousel using Jquery

【发布时间】：2018-10-24 21:46:24

【问题描述】：

我正在尝试将图像动态添加到引导轮播，但它只是在列表中显示它们 (https://i.imgur.com/8lOOg3w.jpg)。

图片是 National Parks Service API 网址 (https://www.nps.gov/common/uploads/structured_data/3C86AAE7-1DD8-B71B-0BA8BC5E5E895E98.jpg)。

这是 html

<div id="carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators"></ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner"></div>
    <!-- Controls -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
        </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

和JS

$(document).ready(function()
for(let j = 0; j < parkInfo.data[i].images.length; j++) 
  $('<div class="item"><img src="'+parkInfo.data[i].images[j].url+'" >   </div>').appendTo('.carousel-inner');
  $('<li data-target="#carousel" data-slide-to="'+j+'"></li>').appendTo('.carousel-indicators')


  $('.item').first().addClass('active');
  $('.carousel-indicators > li').first().addClass('active');
  $('#carousel').carousel();
);

【参考方案1】：

看起来您需要在项目“carousel-item”而不是“item”上开设课程。

https://jsfiddle.net/orb9945u/

$(document).ready(function()
    for(let j = 0; j < 5; j++) 
        $('<div class="carousel-item"><img 
          src="https://loremflickr.com/320/240" >   
          </div>').appendTo('.carousel-inner');
        $('<li data-target="#carousel" data-slide-to="'+j+'"> 
          </li>').appendTo('.carousel-indicators')

    

    $('.carousel-item').first().addClass('active');
    $('.carousel-indicators > li').first().addClass('active');
    $('#carousel').carousel();
);

【讨论】：

这可行，但现在当我点击箭头时，图像不会改变。

你检查过小提琴吗？它在那里工作。您需要做的是在 jQuery 代码中将类从“item”更改为“carousel-item”。

我必须为箭头添加点击事件才能工作，但感谢您让轮播开始工作！