Я использую 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:
Мне кажется, что что Я пытаюсь сделать это основа c и обычная вещь, которую библиотека 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, et c.)? Я не нахожу другого способа, чтобы оба экземпляра jCarousel работали правильно.