尝试根据轮播中显示的图像更改标题和描述时出错

Question

我的页面上有一个部分分为 3 个部分，首先是 "Info"，然后是 "Indicators"，最后是 "Carousel"。

我的问题是 "Info" 部分必须与 "Carousel" 同步才能显示一些与图像相关的信息，但它有延迟，因为它显示的信息轮播中的最后一个活动组件，而不是当前组件。

您可以在下一页看到它的实际状态：https://demos.posicionart.com/grupocob/casos-de-exito.php

JS

$(document).ready(function() {
    showInformation();
    // cuando se hace el slide automatico
    $('#myCarousel').bind('slide.bs.carousel', function (e) {
        showInformation();
    });
    // cuando se hace el slide a traves de los puntos
    $('#myCarousel').bind('slid', function (e) {
        showInformation();
    });
});

function showInformation(){
    var title;
    var desc;
    $('ol.carousel-indicators > li').each(function(){
       if($(this).hasClass('active')){
           title = $(this).data('title');
           desc = $(this).data('desc');
           $('#nombre-caso').html(title);
           $('#descripcion-caso').html(desc);
       }
    });
}

HTML

<div class='container-fluid'>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <div class='row mx-0'>
                <div class="col-lg-3 col-md-3 col-sm-12 px-5">
                    <h3 class="primary-color text-center text-uppercase" id="nombre-caso"></h3>
                    <h6 id="descripcion-caso" class="primary-color text-center"></h6>
                </div>
                <div class="col-lg-1 col-md-1 col-sm-12">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-title="Harley Davison QRO" data-desc="Diseño y construcción - Área de 1,550 M2" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-title="Agencias Freightliner" data-desc="prueba desc" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-title="Estructura Cubierta LOARCA" data-desc="Cubierta 950 M2" data-slide-to="2"></li>
                        <li data-target="#myCarousel" data-title="Centro Automotriz Del Bajío" data-desc="prueba desc" data-slide-to="3"></li>
                        <li data-target="#myCarousel" data-title="Almacenes San Rafael" data-desc="Cubierta 780 M2" data-slide-to="4"></li>
                        <li data-target="#myCarousel" data-title="Bodegas Industriales" data-desc="Cubierta 780 M2" data-slide-to="5"></li>
                        <li data-target="#myCarousel" data-title="Residencial Querétaro" data-desc="Construcción" data-slide-to="6"></li>
                        <li data-target="#myCarousel" data-title="Secundaria Ignacio M. Altamirano" data-desc="Cancha y cafetería - Capacidad 890 alumnos" data-slide-to="7"></li>
                        <li data-target="#myCarousel" data-title="Oficinas ICSI" data-desc="CENTRAL PARK" data-slide-to="8"></li>
                        <li data-target="#myCarousel" data-title="Casa LC ZIBATÁ" data-desc="prueba desc" data-slide-to="9"></li>
                    </ol>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-12 px-0">
                    <!-- The slideshow -->
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="img/casos-exito/cob_galeria_01_harley.jpg" class="img-fluid w-100 h-100" alt="Responsive image">
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_02_freightliner.jpg" class="img-fluid w-100 h-100" alt="Responsive image">
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_03_loarca.jpg" class="img-fluid w-100 h-100" alt="Responsive image">
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_04_automotriz_bajio.jpg" class="img-fluid w-100 h-100" alt="Responsive image">
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_05_almacenes.jpg" class="img-fluid w-100 h-100" alt="Responsive image">
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_06_bodegas_industriales.jpg" class="img-fluid w-100 h-100" alt="Responsive image">
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_07_residencial_queretaro.jpg" class="img-fluid w-100 h-100" alt="Responsive image">
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_08_secundaria_ignacio_altamirano.jpg" class="img-fluid w-100 h-100" alt="Responsive image">
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_09_oficinas_icsi.jpg" class="img-fluid w-100 h-100" alt="Responsive image">
                        </div>
                        <div class="carousel-item">
                            <img src="img/casos-exito/cob_galeria_10_casa_zibata.jpg" class="img-fluid w-100 h-100" alt="Responsive image">
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

在 "Info" 部分，我想显示保存在与轮播指示器相关的全局变量（data-title 和 data-desc）中的文本（因为它们具有活动的class 以轮播中出现的实际图片为准。

编辑我为我的每个 li 项目创建了一个新的点击函数，该函数向点击的 li 项目添加了一个新的 class，所以我没有检查 "active"，而是检查了 "clicked"获取信息。另一方面，对于 bootstrap 旋转木马提供的自动幻灯片，我决定检查我的 "active" li 项目的下一个索引，这就是我获得正确信息的方式。

Answer 1

您想在此处绑定到 slid.bs.carousel 事件 $('#myCarousel').bind('slid', function (e) 而不是 slid 事件。

您也可以像这样更改显示信息的方法

function showInformation(){
    var title;
    var desc;
    var active = $('ol.carousel-indicators > li.active');

    title = active.data('title');
    desc = active.data('desc');
    $('#nombre-caso').html(title);
    $('#descripcion-caso').html(desc);

}

这样您就不会每次都爬过 li 个元素。

这里有一个fiddlehttps://jsfiddle.net/tyddlywink/r7znd9wp/可以看看。你的网站被我的工作网络屏蔽了，所以我无法查看你的页面以获取确切的 css 等等。但是这个 fiddle 具有您正在寻找的功能。

尝试根据轮播中显示的图像更改标题和描述时出错

Error trying to change a title and description based on the image appearing on carousel

html

jquery

carousel

web

twitter-bootstrap