The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Flexslider carousel (custom nav)

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #235722

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

    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 &lt;header&gt; 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.


    Not sure I completely get it but maybe a loop?

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

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

    A single carousel, working as intended. Great!

    Example 2:

    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!


    Seems to work alright what I suggested though?



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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.