Я использую jCarousel, в частности подключенные карусели, которые вы можете увидеть по адресу https://sorgalla.com/jcarousel/examples/connected-carousels/. Для эксперимента по A/B-тестированию мне нужно использовать два экземпляра подключенных каруселей. Первый работает корректно. Второй нет. Во втором случае я нажимаю миниатюры, и большие изображения не меняются. Я не думаю, что официальная документация содержит примеры наличия нескольких подключенных каруселей на одной странице. Любые подсказки о том, как этого достичь? Я попытался выяснить, как https://sorgalla.com/jcarousel/docs/reference/api.html#reload. Я думал о том, чтобы включить это в мой основной файл JavaScript:
$('.jcarousel').jcarousel('reload', {
animation: 'slow'
});
Однако это не решает проблему для меня. Любые подсказки? Спасибо.
ОБНОВЛЕНИЕ 1:
Исходный код см. на странице https://github.com/jsor/jcarousel/blob/master/examples/connected-carousels/index.html. Теперь посмотрите, что я пытаюсь сделать, добавляя второй экземпляр подключенной карусели:
<!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>
Что происходит, так это то, что первый ряд миниатюр управляет обеими большими сценическими изображениями, верхней и нижней. Второй ряд миниатюр не работает. Нажимаешь на нее и ничего не происходит:
ОБНОВЛЕНИЕ 2:
Мне кажется, что то, что я пытаюсь сделать, является базовой и обычной вещью, с которой библиотека jCarousel должна легко справляться. Тем не менее, я не нашел ничего в примерах или документации для достижения того, чего я хочу, и я рассматриваю возможность изменить https://github.com/jsor/jcarousel/blob/master/examples/connected-carousels/jcarousel.connected-carousels.js так что например вместо только
// Setup the carousels. Adjust the options for both carousels here.
var carouselStage = $('.carousel-stage').jcarousel();
var carouselNavigation = $('.carousel-navigation').jcarousel();
У меня может быть что-то вроде этого:
// 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();
Что вы думаете о том, что я планирую попробовать (carouselStage1, carouselNavigation1 и т. д.)? Я не нахожу другого способа, чтобы оба экземпляра jCarousel работали правильно.
