hi everyone, I’m using responsive owl carousel (elementor) and Im trying to link two carousel together, whenever i change the first carousel slide, the other should also change slide. So far i have been unlucky and nothing worked. anyone has done this already?
Hi @onilzuka, and welcome to the community!
If you can provide what code you have, that will allow us to be tter help you. You can use something like CodePen, JSFiddle, ReplIt, or a variety of other sites to host your code for free and allow users to interact with your code.
1 Like
<script>
jQuery(document).ready(function($) {
// Get the first carousel element
var carousel1 = $('.myCarousel');
// Get the second carousel element
var carousel2 = $('.myCarousel2');
// When the first carousel slides to a new slide
carousel1.on('slide.bs.carousel', function(event) {
// Get the current slide index
var currentIndex = $(event.relatedTarget).index();
// Pause the second carousel to prevent automatic sliding
carousel2.carousel('pause');
// Change the second carousel to the corresponding slide
carousel2.carousel(currentIndex);
});
});
</script>
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
2 Likes
Well noted with thanks