如何在同一页面延迟启动多个轮播？

Question

我有一个包含多个 bootstrap 5.3 轮播的页面，我正在尝试延迟启动它们。 第一个轮播应在 1 秒后开始，第二个轮播应在 2 秒后开始，第三个轮播应在 3 秒后开始，依此类推。

每个轮播都有其独特的

id

，例如：

<div class="card-image">
    <div id="carousel__<?php echo $row['guid']; ?>" class="carousel slide carousel-fade" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <a href="<?php echo $galleryLink; ?>">
                    <img class="img-card-gallery" src="<?php print $coverPhoto . '?t=' . time(); ?>" alt="">
                </a>
            </div>
            <?php
for ($i = 0; $i < count($imgfileNames); $i++) {
    echo ' 
        <div class="carousel-item">
            <a href="' . $galleryLink . '">
                <img class="img-card-gallery" src="' . $imgfileNames[$i] . '?t=' . time() . '" alt="' . $imgartTitles[$i] . '">
            </a>
            <div class="carousel-caption d-none d-md-block">
            <!-- Here you can add Caption -->
            </div>
        </div>
        ';
}
            ?>
        </div>
    </div>
    <!-- <a href="<?php echo $galleryLink; ?>"><span class="<?php if($galleryTitle=='') echo 'card-title-without-text'; else echo 'card-title-with-text'; ?>"><?php echo $galleryTitle ?></span></a>-->
</div>

这是我的 JavaScript，它不起作用，而是所有轮播同时启动。

<script>
    $(document).ready(function() {
        var carousels = $('.carousel-fade');
        var initialInterval = 1000; 

        carousels.each(function(index, carousel) {
            var carouselInstance = new bootstrap.Carousel(carousel, { interval: 0 }); 
            console.log('Impostazione del carosello numero ' + index + ' con intervallo ' + initialInterval + 'ms');
            setTimeout(function() {
                carouselInstance.interval = initialInterval; 
                carouselInstance.cycle(); 
            }, 1000); 
            initialInterval += 1000; 
        });
    });
</script>

Answer 1

对代码所做的更改：

 <script>
    $(document).ready(function() {
        var carousels = $('.carousel-fade');
        var initialInterval = 1000;

        carousels.each(function(index, carousel) {
            var carouselInstance = new bootstrap.Carousel(carousel, { interval: 0 });
            console.log('Setting up carousel number ' + index + ' with an interval of ' + initialInterval + 'ms');
            setTimeout(function() {
                carouselInstance.interval  = initialInterval; // Use interval to change the interval
                carouselInstance.cycle();
            }, initialInterval); // Delay the start of each carousel
            initialInterval += 1000;
        });
    });
</script>

使用 carouselInstance.interval 更改轮播的间隔，因为interval是控制轮播计时的内部属性。

将setTimeout延迟更改为initialInterval毫秒，以便每个轮播在所需的延迟后启动。

希望您的问题得到解决。谢谢你。