Multiple/dynamic flexsliders for photo gallery

Question

I'd like to run multiple flexsliders on a page, but in JS, there's only a reference to #carousel and #slider tags. I can use {count} or some other variable next to id to create a unique id, but not quite sure how to execute in JS so that this works dynamically no matter how many sliders client loads. Any help is much appreciated.

Here's the EE/HTML template code:

{playa_projects var_prefix="playafield"}
    <?php $count = $i++; ?>
    <li><a class="fancybox" href="#inline-<?php echo $count; ?>" title="{playafield:studies_caption}">{playafield:title}</a></li>
    <div id="inline-<?php echo $count; ?>" style="display: none;">
        <div id="slider<?php echo $count; ?>" class="flexslider slider-js">
            <div class="flex-heading">
                <div class="col-md-6">
                    <h2>{playafield:project_name}</h2>
                </div>
                {playafield:studies_outline_block var_prefix="nested_matrix"}
                    {if nested_matrix:content_1}
                        <div class="col-md-2 project-name">
                            <h3>Project Size</h3>
                            {nested_matrix:content_1}
                        </div>
                    {/if}
                    {if nested_matrix:content_2}
                        <div class="col-md-2 project-name">
                            <h3>Project Cost</h3>
                            {nested_matrix:content_2}
                        </div>
                    {/if}
                    {if nested_matrix:content_3}
                        <div class="col-md-2 project-name">
                            <h3>Project Use</h3>
                            {nested_matrix:content_3}
                        </div>
                    {/if}
                {/playafield:studies_outline_block}
            </div>
            <ul class="slides">
                {playafield:studies_image_gallery}
                    <li><img src="{playafield:url}" /></li>
                {/playafield:studies_image_gallery}
            </ul>
        </div>
        <div id="carousel<?php echo $count; ?>" class="flexslider carousel-js">
            <ul class="slides">
                {playafield:studies_image_gallery}
                    <li><img src="{playafield:url}" /></li>
                {/playafield:studies_image_gallery}
            </ul>
        </div>
    </div>
{/playa_projects}

Here's the JS:

jQuery(document).ready(function() {         

    jQuery('.fancybox').fancybox({
        width     : 800,
        height    : 800,
        autoSize   : false,
        autoHeight : true,
        autoResize  : true,
        scrollOutside  : true,
        aspectRatio : false,
        maxWidth  : '90%',
        fitToView    : false,
        scrolling : 'auto',
        prevText: "",
        nextText: "",
        helpers:  {
            title : {
                type : 'inside'
            }
        },

        beforeShow:function(el){

            $(".carousel-js").each(function() {
                var id = this.id;
                var subNav = id.substr(-1);

                jQuery('#' + id).flexslider({
                    animation: "slide",
                    controlNav: false,
                    animationLoop: false,
                    slideshow: false,
                    itemWidth: 210,
                    itemMargin: 5,
                    prevText: "",
                    nextText: "",
                    asNavFor: '#slider' + subNav
                    //move: 2,
                    //startAt: 0,
                });
            });

            $(".slider-js").each(function() {
                var id = this.id;
                var carousel = id.substr(-1);

                jQuery('#' + id).flexslider({
                    animation: "fade",
                    controlNav: false,
                    animationLoop: false,
                    slideshow: false,
                    prevText: "",
                    nextText: "",
                    sync: "#carousel" + carousel,
                    //startAt: 0,
                    start: function(slider){
                      $('body').removeClass('loading');
                    }
                });
            });

            //jQuery.fancybox.inner.resize();
            setTimeout(function(){
                jQuery.fancybox.reposition();
                jQuery.fancybox.inner.resize(); 
            },300); 
        }

    });     

});

Answer 1

Easy peasy. Just create your unique ID's as you suggested, but give each carousel a common class.

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

    // this will loop over each carousel
    var this_carousel_id = this.id;

    // do your carousel setup here with your id!

});