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

Flexslider carousel custom nav - multiple on same page

本文关键字：一页 旋转木马 自定义 导航 Flexslider      更新时间：2023-09-26

我正在为一些旋转木马使用flexroader，一切都很好。由于我需要为转盘定位导航，我决定指定自定义导航将是最好的方法。同样，这很好用。这是我正在使用的代码：

$(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（只有一个项目用于演示）：

<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>

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

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

我想我需要使用/指定一个父div，然后确保目标的.nav-carousel是该div的后代，这样它只影响相对的子旋转木马？我用我在帖子中包含的代码尝试了一下，但没有感到高兴。

在.carouseldiv中移动<header>似乎不会破坏转盘布局/移动，但仅此一点并不能修复导航。

希望有人能帮上忙。

我不能因此而受到赞扬，Shikkedil在css技巧上指出了我的错误。使用循环工作，这里有一个工作的多转盘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容器中。

希望这对其他人有用！

相关文章：