Flexslider 旋转木马自定义导航 - 同一页面上有多个

Question

我正在为某些轮播使用 flexslider，一切正常。由于我需要在何处放置轮播导航，我决定指定自定义导航是最好的方法。同样，这工作正常。这是我正在使用的代码：

$(window).load(function() {
    $('.carousel').flexslider({
        animation: "slide",
        customDirectionNav: $(".nav-carousel a"),
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 220,
        itemMargin: 10,
        minItems: 1,
        maxItems: 5
    });
});

HTML（仅带 1 项用于演示目的）：

<div class="box">
    <header class="header">
        <h2>Similar products</h2>
        <p>other customers have purchased</p>
        <div class="nav-carousel">
            <a href="#" class="btn flex-prev"><span>Prev</span></a>
            <a href="#" class="btn flex-next"><span>Next</span></a>
        </div>
    </header>

    <div class="carousel">
        <ul class="products slides">
            <li class="h-product">
                <a href="#" title="TITLE TEXT" class="inner">
                    <img src="img/temp/products/thumbs/1.jpg" alt="ALT TEXT" class="u-photo" />
                    <h2 class="p-name">Product title</h2>
                    <p class="e-description">Product description</p>
                    <data class="p-rating" value="4">Rating: 4 out of 5</data>
                    <p class="value"><del>£7.99</del> <data class="p-price" value="6.95">£6.95</data></p>
                </a>
            </li>
        </ul>
    </div>
</div>

当我在同一页面上有多个轮播时会出现此问题。我可以看到脚本只是在寻找 div 和 .nav-carousel 的 class，显然，如果超过 1 个，它就会变得混乱和崩溃。

我不想为 .carousel-2 甚至 .carousel-3 复制脚本。虽然我无法想象会有比这更多的东西，但我更希望它是 'scalable' 以防万一。

我想我需要 use/specify 父级 div 然后确保目标 .nav-carousel 是 div 的后代，所以它只会影响相对子轮播？我用我在 post 中包含的代码尝试了这个，但没有快乐。

在 .carousel div 中移动 <header> 似乎不会破坏旋转木马 layout/movement 的任何内容，但仅此一项并不能修复导航.

希望有人能帮忙。

Answer 1

这不能归功于我，Shikkediel 在 css-tricks 指出了我方法的错误。使用循环有效，这是一个有效的多轮播 CodePen 示例：

http://codepen.io/anon/pen/xZGzzN?editors=001

这是脚本：

$(window).on('load', function() {

    $('.carousel').each(function() {

        $(this).flexslider({
        animation: 'slide',
        customDirectionNav: $(this).find('.nav-carousel a'),
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 250,
            itemMargin: 0,
            minItems: 1,
            maxItems: 5
        });
    });
});

为此，导航 .nav-carousel 必须位于 .carousel 容器内。

希望这对其他人有用！

Flexslider 旋转木马自定义导航 - 同一页面上有多个

Flexslider carousel custom nav - multiple on same page

javascript

jquery

flexslider