I have a section on my page that is divided in 3, first "Info" then "Indicators" and finally "Carousel".
My problem here is that the "Info" part must be synchronized with the "Carousel", in order to show some info related to the image, but it has a delay because it shows the info of the last active component in the carousel, not the current one.
You can see the actual state of this on the next page: 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>
In the "Info" section I want to show the text saved in the global variables (data-title and data-desc) that are related with the carousel indicators (because those have the active class based in the actual image appearing on the carousel).
EDIT I created a new on click function for each of my li items, that function adds a new class to the clicked li item, so instead of checking the "active", I check the "clicked" one to get the info. In the other side, for the auto slide that the bootstrap carousel provides, I decided to check the next index of my "active" li item, that's how I got the correct information.
You want to bind to the slid.bs.carousel event here $('#myCarousel').bind('slid', function (e) not the slid event.
You could also change your showinformation method like this
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);
}
This way you aren't crawling over the li elements each time.
Here is a fiddle https://jsfiddle.net/tyddlywink/r7znd9wp/ to look at. Your site is blocked by my work network so I can't look at your page to get the exact css and what not. But this fiddle has the functionality that you were looking for.