Jquery flexslider垂直缩略图转盘

我正在尝试用flexslider创建一个垂直缩略图滑块，但它有很多问题

今天玩过之后，我修复了很多错误，除了一个：当在旋转木马中向上滑动时（即按

.flex next

），它在到达最后一张图像后继续滑动三次，您可以再按三次

以下是到达最后一张图像后的滑块：

旋转木马的外观应如何

在这种情况下，顶部箭头应该不可拾取，但我可以再单击三次，然后旋转木马如下所示：

旋转木马的真实外观：

代码如下： HTML

注意：当我切换并将

.col-sm-9

置于

#carousel

和

col-sm-3

置于

#slider

时，不会发生这种情况

---

非常感谢您的帮助

你解决了这个问题吗？如果是，请分享相同的。在SO问题上提供了一些很好的答案。

<div class="flex-slider-wrapper row">   
    <div class="col-sm-3">   
        <div id="carousel" class="flexslider">   
            <ul class="slides">
                <?php
                if( have_rows('popup_repeater') ):

                    while( have_rows('popup_repeater') ): the_row();
                        $img_url = get_sub_field('popup_add_img');
                        echo "<li><img src= '" . esc_url( $img_url['url'] ) . "'/></li>";
                    endwhile;
                else:
                    echo "";  
                endif;
                ?>   
            </ul>    
        </div><!--#carousel-->    
    </div>   
    <div class="col-sm-9">    
        <div id="slider" class="flexslider">    
            <ul class="slides">   
                <?php
                if( have_rows('popup_repeater') ):

                    while( have_rows('popup_repeater') ): the_row();
                        $img_url = get_sub_field('popup_add_img');
                        echo "<li><img src= '" . esc_url( $img_url['url'] ) . "'/></li>";
                    endwhile;  
                else :
                    echo "";   
                endif;
                ?>    
            </ul>   
        </div><!--#slider-->
    </div>  
</div><!--.flexslider-wrapper-->

$('.ajax-popup-link-agency').magnificPopup({
    type: 'ajax',
    midClick: true,
    overflowY: "scroll",
    alignTop: true,
    fixedBgPos: true,
    closeMarkup: "<button title='%title%' type='button' class='mfp-close'>button</button>",
    fixedContentPos: false,
    callbacks: {
        ajaxContentAdded: function() {
            $('#carousel').flexslider({
                animation: 'slide',
                direction: direction,
                controlNav: false,
                animationLoop: false,
                itemWidth: 143,
                itemMargin: 2,
                maxItems: 4,
                slideshow: false,
                asNavFor: '#slider'
            });
            $('#slider').flexslider({
                animation: 'slide',
                controlNav: false,
                directionNav: true,
                animationLoop: false,
                slideshow: false,
                sync: '#carousel'
            });
        }
    }
});