在同一页面上使用两个连接的轮播（jCarousel）实例

问题描述 投票：0回答：1

我正在使用jCarousel，特别是您可以在https://sorgalla.com/jcarousel/examples/connected-carousels/上看到的Connected Carousel。对于A / B测试实验，我需要使用Connected Carousels的两个实例。第一个正常工作。第二个没有。对于第二个实例，我单击缩略图，大图则保持不变。我认为官方文档中没有提供在单个页面上具有多个Connected Carousels的示例。关于如何实现的任何提示？我尝试过的是研究如何使用https://sorgalla.com/jcarousel/docs/reference/api.html#reload。我正在考虑将其合并到我的主要JavaScript文件中：

$('.jcarousel').jcarousel('reload', {
    animation: 'slow'
});

但是，这并不能解决我的问题。有什么提示吗？谢谢。

UPDATE 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>&lsaquo;</span></a>
                    <a href="#" class="next next-stage"><span>&rsaquo;</span></a>
                </div>

                <div class="navigation">
                    <a href="#" class="prev prev-navigation">&lsaquo;</a>
                    <a href="#" class="next next-navigation">&rsaquo;</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>&lsaquo;</span></a>
                    <a href="#" class="next next-stage"><span>&rsaquo;</span></a>
                </div>

                <div class="navigation">
                    <a href="#" class="prev prev-navigation">&lsaquo;</a>
                    <a href="#" class="next next-navigation">&rsaquo;</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>

发生的情况是，缩略图的第一行同时控制了大型舞台图片，即上方的缩略图和下方的缩略图。缩略图的第二行不起作用。您单击它，没有任何反应：

enter image description here

UPDATE 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的两个实例正常工作。

我正在使用jCarousel，特别是您可以在https://sorgalla.com/jcarousel/examples/connected-carousels/上看到的Connected Carousels。对于A / B测试实验，我需要使用两个实例...

javascript jquery carousel jcarousel
1个回答
0
投票

我通过修改https://github.com/jsor/jcarousel/tree/master/examples/connected-carousels上的所有三个文件使其正常工作。我不确定我所做的是否是最优雅的解决方案和最有效的解决方案，因为正如我在问题中提到的那样，从我的角度来看，我需要的是jCarousel库应该能够轻松处理的基本且常见的事情。但是，我测试了我的解决方案，它可以正常工作。现在，两个jCarousels都在同一页面上正确且彼此独立运行。查看我的解决方案：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.