I am using jCarousel, specifically the Connected Carousels that you can see at https://sorgalla.com/jcarousel/examples/connected-carousels/. For an A/B testing experiment, I need to use two instances of the Connected Carousels. The first one works correctly. The second one does not. For the second instance, I click the thumbnail pictures and the big pictures do not change. I do not think the official documentation provides examples for having multiple Connected Carousels on a single page. Any hints about how to achieve it? What I have tried is to investigate how https://sorgalla.com/jcarousel/docs/reference/api.html#reload could be used. I was thinking about maybe incorporating this in my main JavaScript file:
$('.jcarousel').jcarousel('reload', {
animation: 'slow'
});
However, that is not fixing the problem for me. Any hints? Thank you.
UPDATE 1:
See the original code at https://github.com/jsor/jcarousel/blob/master/examples/connected-carousels/index.html. Now see what I am trying to do adding a second instance of the connected carousel:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Connected Carousels - jCarousel Examples</title>
<!-- Shared assets -->
<link rel="stylesheet" type="text/css" href="../_shared/css/style.css">
<!-- Example assets -->
<link rel="stylesheet" type="text/css" href="jcarousel.connected-carousels.css">
<script type="text/javascript" src="../../vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="../../dist/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="jcarousel.connected-carousels.js"></script>
</head>
<body>
<div class="wrapper">
<h1>Connected Carousels</h1>
<p>This example shows how to connect two carousels together so that one carousels acts as a navigation for the other.</p>
<div class="connected-carousels">
<div class="stage">
<div class="carousel carousel-stage">
<ul>
<li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img2.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img3.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img4.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img5.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img6.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<p class="photo-credits">
Photos by <a href="http://www.mw-fotografie.de">Marc Wiegelmann</a>
</p>
<a href="#" class="prev prev-stage"><span>‹</span></a>
<a href="#" class="next next-stage"><span>›</span></a>
</div>
<div class="navigation">
<a href="#" class="prev prev-navigation">‹</a>
<a href="#" class="next next-navigation">›</a>
<div class="carousel carousel-navigation">
<ul>
<li><img src="../_shared/img/img1_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img2_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img3_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img4_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img5_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img6_thumb.jpg" width="50" height="50" alt=""></li>
</ul>
</div>
</div>
</div>
<div class="connected-carousels">
<div class="stage">
<div class="carousel carousel-stage">
<ul>
<li><img src="../_shared/img/img1.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img2.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img3.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img4.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img5.jpg" width="600" height="400" alt=""></li>
<li><img src="../_shared/img/img6.jpg" width="600" height="400" alt=""></li>
</ul>
</div>
<p class="photo-credits">
Photos by <a href="http://www.mw-fotografie.de">Marc Wiegelmann</a>
</p>
<a href="#" class="prev prev-stage"><span>‹</span></a>
<a href="#" class="next next-stage"><span>›</span></a>
</div>
<div class="navigation">
<a href="#" class="prev prev-navigation">‹</a>
<a href="#" class="next next-navigation">›</a>
<div class="carousel carousel-navigation">
<ul>
<li><img src="../_shared/img/img1_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img2_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img3_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img4_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img5_thumb.jpg" width="50" height="50" alt=""></li>
<li><img src="../_shared/img/img6_thumb.jpg" width="50" height="50" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
What happens is that the first row of thumbnails controls both big stage pictures, the one above and the one below. The second row of thumbnails does not work. You click on it and nothing happens:
UPDATE 2:
It seems to me that what I am trying to do is a basic and common thing that the jCarousel library should be able to handle easily. Nonetheless, I am not finding anything in the examples or documentation to achieve what I want and what I am considering is to modify https://github.com/jsor/jcarousel/blob/master/examples/connected-carousels/jcarousel.connected-carousels.js so that for example instead of only
// Setup the carousels. Adjust the options for both carousels here.
var carouselStage = $('.carousel-stage').jcarousel();
var carouselNavigation = $('.carousel-navigation').jcarousel();
I can have for something like this:
// Setup the carousels. Adjust the options for both carousels here.
var carouselStage = $('.carousel-stage').jcarousel();
var carouselNavigation = $('.carousel-navigation').jcarousel();
var carouselStage1 = $('.carousel-stage1').jcarousel();
var carouselNavigation1 = $('.carousel-navigation1').jcarousel();
What do you think about what I am planning to try (carouselStage1, carouselNavigation1, etc.)? I am not finding any other way to have both instances of jCarousel working correctly.
I made it work correctly by modifying all three files at https://github.com/jsor/jcarousel/tree/master/examples/connected-carousels. I am not sure if what I did was the most elegant solution and efficient solution, since as I mentioned in my question, from my point of view what I needed was a basic and common thing that the jCarousel library should be able to handle easily. Nonetheless, I tested my solution and it works correctly. Both jCarousels are now on the same page running correctly and independently from each other. See my solution:
index.html
jcarousel.connected-carousels.css
jcarousel.connected-carousels.js