在同一页面上使用两个连接轮播 (jCarousel) 实例

Question

我正在使用 jCarousel，特别是可以使用您在 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 看到的 Connected Carousel。我正在考虑将其合并到我的 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>&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>

发生的事情是，第一行缩略图控制了两个大舞台图片，一个在上面，一个在下面。第二行缩略图不起作用。你点击它但没有任何反应：

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

Answer 1

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

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-stage1">
                        <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-navigation1">
                        <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>

jcarousel.connected-carousels.css

/** Stage container **/

.connected-carousels .stage {
    width: 620px;
    margin: 20px auto;
    position: relative;
}

.connected-carousels .photo-credits {
    position: absolute;
    right: 15px;
    bottom: 0;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
    opacity: .66;
}

.connected-carousels .photo-credits a {
    color: #fff;
}

/** Navigation container **/

.connected-carousels .navigation {
    width: 260px;
    margin: 20px auto;
    position: relative;
}

/** Shared carousel styles **/

.connected-carousels .carousel {
    overflow: hidden;
    position: relative;
}

.connected-carousels .carousel ul {
    width: 10000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.connected-carousels .carousel li {
    float: left;
}

/** Stage carousel specific styles **/

.connected-carousels .carousel-stage {
    height: 400px;
    border: 10px solid #fff;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

.connected-carousels .carousel-stage1 {
    height: 400px;
    border: 10px solid #fff;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}

/** Navigation carousel specific styles **/

    .connected-carousels .carousel-navigation {
        height: 60px;
        width: 240px;
        background: #fff;
        border: 10px solid #fff;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        -webkit-box-shadow: 0 0 2px #999;
           -moz-box-shadow: 0 0 2px #999;
                box-shadow: 0 0 2px #999;
    }

    .connected-carousels .carousel-navigation1 {
        height: 60px;
        width: 240px;
        background: #fff;
        border: 10px solid #fff;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        -webkit-box-shadow: 0 0 2px #999;
           -moz-box-shadow: 0 0 2px #999;
                box-shadow: 0 0 2px #999;
    }

    .connected-carousels .carousel-navigation li {
        cursor: pointer;
    }

    .connected-carousels .carousel-navigation1 li {
        cursor: pointer;
    }

    .connected-carousels .carousel-navigation li img {
        display: block;
        border: 5px solid #fff;
    }

    .connected-carousels .carousel-navigation1 li img {
        display: block;
        border: 5px solid #fff;
    }

    .connected-carousels .carousel-navigation li.active img {
        border-color: #ccc;
    }

    .connected-carousels .carousel-navigation1 li.active img {
        border-color: #ccc;
    }

    /** Stage carousel controls **/

    .connected-carousels .prev-stage,
    .connected-carousels .next-stage {
        display: block;
        position: absolute;
        top: 0;
        width: 305px;
        height: 410px;
        color: #fff;
    }

    .connected-carousels .prev-stage {
        left: 0;
    }

    .connected-carousels .next-stage {
        right: 0;
    }

    .connected-carousels .prev-stage.inactive,
    .connected-carousels .next-stage.inactive {
        display: none;
    }

    .connected-carousels .prev-stage span,
    .connected-carousels .next-stage span {
        display: none;
        position: absolute;
        top: 50%;
        width: 30px;
        height: 30px;
        text-align: center;
        background: #4E443C;
        color: #fff;
        text-decoration: none;
        text-shadow: 0 0 1px #000;
        font: 24px/27px Arial, sans-serif;
        -webkit-border-radius: 30px;
           -moz-border-radius: 30px;
                border-radius: 30px;
        -webkit-box-shadow: 0 0 2px #999;
           -moz-box-shadow: 0 0 2px #999;
                box-shadow: 0 0 2px #999;
    }

    .connected-carousels .prev-stage span {
        left: 20px;
    }

    .connected-carousels .next-stage span {
        right: 20px;
    }

    .connected-carousels .prev-stage:hover span,
    .connected-carousels .next-stage:hover span {
        display: block;
    }

    /** Navigation carousel controls **/

    .connected-carousels .prev-navigation,
    .connected-carousels .next-navigation {
        display: block;
        position: absolute;
        width: 30px;
        height: 30px;
        background: #4E443C;
        color: #fff;
        text-decoration: none;
        text-shadow: 0 0 1px #000;
        font: 16px/29px Arial, sans-serif;
        -webkit-border-radius: 30px;
           -moz-border-radius: 30px;
                border-radius: 30px;
        -webkit-box-shadow: 0 0 2px #999;
           -moz-box-shadow: 0 0 2px #999;
                box-shadow: 0 0 2px #999;
    }

    .connected-carousels .prev-navigation {
        left: -15px;
        top: 22px;
        text-indent: 6px;
    }

    .connected-carousels .next-navigation {
        right: -15px;
        top: 22px;
        text-indent: 20px;
    }

    .connected-carousels .prev-navigation.inactive,
    .connected-carousels .next-navigation.inactive {
        opacity: .5;
        cursor: default;
    }

jcarousel.connected-carousels.js

(function($) {
    // This is the connector function.
    // It connects one item from the navigation carousel to one item from the
    // stage carousel.
    // The default behaviour is, to connect items with the same index from both
    // carousels. This might _not_ work with circular carousels!
    var connector = function(itemNavigation, carouselStage) {
        return carouselStage.jcarousel('items').eq(itemNavigation.index());
    };

    $(function() {
        // 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();

        // We loop through the items of the navigation carousel and set it up
        // as a control for an item from the stage carousel.
        carouselNavigation.jcarousel('items').each(function() {
            var item = $(this);

            // This is where we actually connect to items.
            var target = connector(item, carouselStage);

            item
                .on('jcarouselcontrol:active', function() {
                    carouselNavigation.jcarousel('scrollIntoView', this);
                    item.addClass('active');
                })
                .on('jcarouselcontrol:inactive', function() {
                    item.removeClass('active');
                })
                .jcarouselControl({
                    target: target,
                    carousel: carouselStage
                });
        });

        carouselNavigation1.jcarousel('items').each(function() {
            var item = $(this);

            // This is where we actually connect to items.
            var target = connector(item, carouselStage1);

            item
                .on('jcarouselcontrol:active', function() {
                    carouselNavigation1.jcarousel('scrollIntoView', this);
                    item.addClass('active');
                })
                .on('jcarouselcontrol:inactive', function() {
                    item.removeClass('active');
                })
                .jcarouselControl({
                    target: target,
                    carousel: carouselStage1
                });
        });


        // Setup controls for the stage carousel
        $('.prev-stage')
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });

        $('.next-stage')
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });

        // Setup controls for the navigation carousel
        $('.prev-navigation')
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .jcarouselControl({
                target: '-=1'
            });

        $('.next-navigation')
            .on('jcarouselcontrol:inactive', function() {
                $(this).addClass('inactive');
            })
            .on('jcarouselcontrol:active', function() {
                $(this).removeClass('inactive');
            })
            .jcarouselControl({
                target: '+=1'
            });
    });
})(jQuery);

在同一页面上使用两个连接轮播 (jCarousel) 实例

Using two instances of Connected Carousels (jCarousel) on the same page

javascript

jquery

jcarousel

carousel