Support

Account

Home Forums Front-end Issues Flexslider not syncing with dynamic items

Solving

Flexslider not syncing with dynamic items

  • I have flexslider activated with a ACF for each loop using this code:

    $(window).load(function() {
      // The slider being synced must be initialized first
        $('#gallerycarousel').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            directionNav: true,
            itemWidth: 300,
            itemMargin: 10,
            animationLoop: true,
            asNavFor: '#galleryslider'
        });
    
        $('#galleryslider').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            directionNav: true,
            sync: "#gallerycarousel"
        });
    
    });
    
    <div class="flexslider" id="galleryslider">
        <ul class="slides">
    
        <?php
        $gallery = get_field('fullgallery');
    
            foreach( $gallery as $galleryImage ): 
            $image = $galleryImage['url']; ?>
    
                <li style="background-image: url('<?php echo $image; ?>')"></li>
    
            <?php endforeach; ?>
    
        </ul>
    </div>
    
    <div class="flexslider" id="gallerycarousel">
        <ul class="slides">
    
            <?php
            foreach( $gallery as $galleryImage ):
            $image = $galleryImage['url'];
            ?>
    
                <li style="background-image: url('<?php echo $image; ?>'); background-size: cover;">
    
                    <div class="viewImg">
                        <a class="fancybox" rel="gallery1" href="<?php echo $image; ?>" title="<?php echo $galleryImage['caption']; ?>"><i class="fa fa-search"></i></a>
                    </div>
    
                </li>
    
                <meta property="og:image" content="<?php echo $galleryImage['url']; ?>" />
            <?php endforeach; ?>
    
        </ul>
    </div>

    My issue is that on click of a thumbnail, it takes me to the wrong large image, I have tried re-downloading flexslider but no luck, I have also tried replacing the for each loop with just static items and, that seems to fix it.

    And here is the Static code:

    <div id="galleryslider" class="flexslider">
            
        <div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 4200%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
        
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/image1.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;" class="flex-active-slide"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-25.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-4.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-2.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-5.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/image3.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/image2.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-3.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-57.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/room.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-16.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-23.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-30.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-531.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-66.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-681.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-75.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-77.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-81.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-851.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-98.jpg&quot;); width: 1903px; margin-right: 0px; float: left; display: block;"></li>
                    
                                
            </ul></div><ul class="flex-direction-nav"><li class="flex-nav-prev"><a href="#" class="flex-prev flex-disabled" tabindex="-1">Previous</a></li><li class="flex-nav-next"><a href="#" class="flex-next">Next</a></li></ul></div>
    
    <div id="gallerycarousel" class="flexslider">
            
        <div class="flex-viewport" style="overflow: hidden; position: relative;"><ul class="slides" style="width: 4200%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
        
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/image1.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;" class="flex-active-slide">
                        <div class="viewImg" style="display: none;">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/image1.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/image1.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-25.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg" style="display: none;">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-25.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-25.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-4.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-4.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-4.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-2.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-2.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-2.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-5.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-5.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-5.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/image3.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/image3.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/image3.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/image2.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/image2.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/image2.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-3.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-3.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/11/La-cala-HR-3.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-57.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-57.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-57.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/room.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/room.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/room.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-16.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-16.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-16.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-23.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-23.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-23.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-30.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-30.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-30.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-531.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-531.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-531.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-66.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-66.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-66.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-681.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-681.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-681.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-75.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-75.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-75.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-77.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-77.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-77.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-81.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-81.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-81.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-851.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-851.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-851.jpg" property="og:image">
                                
                    <li style="background-image: url(&quot;http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-98.jpg&quot;); background-size: cover; width: 300px; margin-right: 10px; float: left; display: block;">
                        <div class="viewImg">
                            <a title="" href="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-98.jpg" rel="gallery" class="fancybox"><i class="fa fa-search"></i></a>
                        </div>
                    </li>
                    
                    <meta content="http://127.0.0.1/lch/wp-content/uploads/2015/09/La-cala-LR-98.jpg" property="og:image">
                                
            </ul></div><ul class="flex-direction-nav"><li class="flex-nav-prev"><a href="#" class="flex-prev">Previous</a></li><li class="flex-nav-next"><a href="#" class="flex-next">Next</a></li></ul></div>
    

    I am unsure on how to get it to work with the foreach loop, does anyone have a solution for this?

  • Hi @gab1982

    It’s because the HTML code you used is the code that is generated by Flexslider. You need to use the right structure to make it works. Please take a look at these pages to learn more about it: https://www.woothemes.com/flexslider/, https://www.advancedcustomfields.com/resources/gallery/. Looking at those pages, I believe your code should be like this:

    <script>
    jQuery(function($) {
        $(window).load(function() {
          // The slider being synced must be initialized first
            $('#gallerycarousel').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                directionNav: true,
                itemWidth: 300,
                itemMargin: 10,
                animationLoop: true,
                asNavFor: '#galleryslider'
            });
    
            $('#galleryslider').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                directionNav: true,
                sync: "#gallerycarousel"
            });
          
            $('.flexslider').flexslider();
          
    
        });
    });
    </script>
    
    <?php
    $images = get_field('fullgallery');
    if( $images ): 
    ?>
    
        <div id="galleryslider" class="flexslider">
            <ul class="slides">
                <?php foreach( $images as $image ): ?>
                    <li>
                        <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                        <p><?php echo $image['caption']; ?></p>
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>
        <div id="gallerycarousel" class="flexslider">
            <ul class="slides">
                <?php foreach( $images as $image ): ?>
                    <li>
                        <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                    </li>
                <?php endforeach; ?>
            </ul>
        </div>
    <?php endif; ?>

    I hope this helps.

  • Hi James,
    The static code I provided is the code that actually works as I hand coded it and is not the generated code, but the static code works as I expect however when I initiate the foreach loop it as mentioned it jumps to the wrong slide.

    Thank you for providing your code however that broke the gallery, flexslider can be initiated multiple times as shown here: http://flexslider.woothemes.com/thumbnail-slider.html and by using:

    $('#gallerycarousel').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                directionNav: true,
                itemWidth: 300,
                itemMargin: 10,
                animationLoop: true,
                asNavFor: '#galleryslider'
            });
    
            $('#galleryslider').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                directionNav: true,
                sync: "#gallerycarousel"
            });
  • After some research today I found out this was the culprit:

    <meta property=”og:image” content=”<?php echo $galleryCarouselImage[‘url’]; ?>” />

    It seems to confuse the flexslider carousel

  • Hi @gab1982

    The static code is working because it’s the final code structure that is generated by flexslider from the HTML code generated by the PHP code.

    Regarding the broken gallery, I’m sorry I think I left this code $('.flexslider').flexslider(); that may break the gallery.

    I’ve tested the code I gave you before on my end, and it was working correctly. But I’m glad that you found the main issue of your code πŸ™‚

    Thanks!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.