Flexslider carousel custom nav - multiple on same page

Question

I'm using flexslider for some carousels, everything works fine. Due to where I need to position the navigation for the carousel, I decided specifying custom navigation would be the best approach. Again, this works fine. This is the code I'm using:

$(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
    });
});

The HTML (just with 1 item for demonstration purposes):

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

The issue occurs where I have multiple carousels on the same page. I can see the script is just looking for a div with a class of .nav-carousel, obviously if there is more than 1 it's getting confused and breaking.

I don't want to duplicate the script for a .carousel-2 or even .carousel-3. Although I can't imagine there ever being more than that I'd prefer it to be 'scalable' just incase.

I imagine I'd need to use/specify a parent div then make sure that the .nav-carousel that's targeted is descendant of that div so it only effects the relative child carousel? I tried this with the code I've included in the post but without joy.

Moving the <header> within the .carousel div doesn't seem to break anything in terms of the carousel layout/movement but that alone doesn't fix the navigation.

Hope someone can help with this.

Answer 1

I can't take credit for this, Shikkediel over at css-tricks pointed out the error of my ways. Using a loop worked, here's a working multi-carousel CodePen example:

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

Here's the script:

$(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
        });
    });
});

For this to work, the navigation .nav-carousel, has to be within the .carousel container.

Hope this is useful for someone else!