2

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

    });     

});

enter image description here

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!

});
6
  • I've tried this a few different ways with no luck. Any other hints would be appreciated. Thank you.
    – frshjb373
    Nov 18 '15 at 15:31
  • Did you apply the class="carousel" to your slider element (the one you give an ID to)? If so, use the each() function and just console.log(this.id). Are you getting the expected output in your developer console?
    – jrothafer
    Nov 18 '15 at 15:53
  • I got the output, and attached screenshot...along with my revised code. Definitely looks like I'm getting closer, but still haven't resolved.
    – frshjb373
    Nov 18 '15 at 16:31
  • Did you prepend your ids with hashtags? jQuery won't understand ("my_id_1").carousel() but it will ("#my_id_1").carousel(). So make sure var my_id = "#" + this.id;
    – jrothafer
    Jan 19 '16 at 19:07
  • I updated my code. I was able to get the first ten slides working, however think something to do with substr isn't working. Any ideas?
    – frshjb373
    Jan 20 '16 at 15:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.