I am currently using 'Owl Carousel' to showcase content on my website. Underneath the carousel, there is a special text block that I want to update as I scroll through the carousel. Unfortunately, my jQuery skills are not strong enough to make this happen. The text should change depending on which element is at the center of the carousel.
For instance, if element number 1 is in the center, I want the text to display: "Hello, this is the first element". As I scroll to the next element, the previous text should disappear and be replaced by the text associated with the new element.
Does anyone have any ideas on how to achieve this?
// Using Owl Carousel plugin version 2.2.1
$('.projects-carousel').owlCarousel({
loop:true,
margin:30,
nav:true,
center:true,
responsive:{
0:{
items:1
},
1600:{
items:2,
stagePadding:75
}
}
});<div class="owl-carousel projects-carousel">
<div class="projects-Wrapper">
<div class="projects-img-wrapper">
<a class="popup-youtube" href="#"><img src="img/projects/1.png" alt="Jey The Dog"></a>
</div>
</div>
<div class="projects-Wrapper">
<div class="projects-img-wrapper">
<a class="popup-youtube" href="#"><img src="img/projects/2.png" alt="Jey The Cat"></a>
</div>
</div>
</div>
<div class="text-block">
<!-- Need help connecting the carousel elements with their corresponding text here -->
</div>