Question

我正在脱发...我已经设法在缩略图上使用链接以使用不同的 url 重新加载 iframe（因此我可以从数据库中读取与新活动图像相关的详细信息）。

当轮播自动播放或有人点击上一个/下一个按钮时，只有图像改变，iframe 不刷新。

是否有一种简单的方法可以通过定位 bootstrap javascript 来实现这一目标？

另一种解决方案是只在轮播中加载当前图像并像我对缩略图所做的一样修改上一个/下一个按钮......但那样会失去自动播放。

<!-- CAROUSEL -->
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" class="active" aria-current="true" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
        </div>
    <div class="carousel-inner">
        <div class="carousel-item d-flex justify-align-center" data-bs-interval="8000">
            <img src="/image/PG_125832-1200-800-c" class="d-block img-fluid" name="Photo" style="margin:auto;">
        </div>
        <div class="carousel-item d-flex justify-align-center" data-bs-interval="8000">
            <img src="/image/PG_147703-800-800-c" class="d-block img-fluid" name="Photo" style="margin:auto;">
        </div>
        <div class="carousel-item d-flex justify-align-center" data-bs-interval="8000">
            <img src="/image/PG_142704-800-800-c" class="d-block img-fluid" name="Photo" style="margin:auto;">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </button>
</div>


<!-- THUMBNAILS -->
<div class="col-md-12 site-subpage">
    <img src="/image/PG_125832-75-50" class="modal-thumb" name="Thumb_0" alt="thumb 0..." onclick="window.parent.frames['modalLink'].src='/image/PG_125832-1200-800-cm?c=fauna&p=main';">
    <img src="/image/PG_147703-50-50" class="modal-thumb-active" name="Thumb_1" alt="thumb 1..." onclick="window.parent.frames['modalLink'].src='/image/PG_147703-800-800-cm?c=fauna&p=main';">
    <img src="/image/PG_151493-89-50" class="modal-thumb" name="Thumb_2" alt="thumb 2..." onclick="window.parent.frames['modalLink'].src='/image/PG_151493-1200-675-cm?c=fauna&p=main';">
</div>

如何强制 Bootstrap 5 carousel prev/next 按钮使用新 url 重新加载 iframe

0 个答案: