Flexslider carousel (custom nav)

[grimski]

I’m using the flexslider plug-in for carousels throughout a website, which 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 …the issue comes when I have 2 carousels on the same page.

This is my script:

$(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 (with 1 item for demonstration + length!):

<div class="box">
    <div class="carousel">

        <header class="hgroup">
            <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>
            <h2 class="title">Last Minute Deals</h2>
            <p class="subtitle">get yours quickly while stocks last!</p>
        </header>

        <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">Boneless Pork Leg Joint</h2>
                    <p class="e-description">1.5kg serves 4-5 people</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>

I can see the script is looking for a div with a class of .nav-carousel, obviously if there is more than 1 on the page 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 mean only the nav-carousel within the div is target.

Hope someone can help with this.

[Shikkediel]

Not sure I completely get it but maybe a loop?

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

    $(this).flexslider({
    animation: 'slide',
    customDirectionNav: $(this).find('.nav-carousel a'),

    ...

[grimski]

@Shikkediel that’s what I thought but I couldn’t get it to work. I’ve created a couple of pen’s to illustrate the issue, sorry, should of done this before!

Example 1: http://codepen.io/moy/pen/PZqOYK

A single carousel, working as intended. Great!

Example 2: http://codepen.io/moy/pen/YwXrMW

Adding an additional carousel breaks the navigation. You can see the custom nav doesn’t work anymore and the default nav is loaded in below each carousel.

Originally I had the .hgroup div (which contains the custom nav) outside .carousel container. As it didn’t effect the layout at all, I moved it to within it as I thought it would be easier for the custom nav to know which carousel it was associated to.

Be great if someone could help with this. A bit stuck!

[Shikkediel]

Seems to work alright what I suggested though?

Demo

[grimski]

I tried that before posting and again when you suggested it and it didn’t work …but using your code it works perfectly!

I was clearing missing something from my attempt at the script, I should stick to Photoshop and HTML/CSS ;)

Thanks a lot for sorting this out for me :)

[Author]

Posts