I've a page with multiple bootstrap 5.3 carousels and I'm trying to start them delayed.
The first carousel should start after 1 second, the second one after 2 second, the 3rd after 3 and so on.

我有一个带有多个引导5.3旋转木马的页面，但我正在尝试延迟启动它们。第一个旋转木马应该在1秒后开始，第二个旋转木马应该在2秒后开始，第三个旋转木马应该在3秒后开始，依此类推。

Each carousel has its unique id, like:

每个carousel都有其唯一的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>

And this is my JavaScript which doesn't work, instead all carousels start at the same time.

这是我的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>

Changes made to your code:

对代码所做的更改：

 <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>

Use carouselInstance.interval to change the interval of the carousel, as interval is the internal property that controls the carousel's timing.

使用carouselInstance.Interval更改旋转传送带的间隔，因为Interval是控制旋转传送带计时的内部属性。

Change the setTimeout delay to initialInterval milliseconds so that each carousel starts after the desired delay.

将setTimeout Delay更改为InitialInterval毫秒，以便每个旋转传送带在所需延迟后启动。

I hope your problem is solved. Thank you.

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