Question

我尝试使用flexslider创建垂直缩略图滑块，但它非常错误。

今天玩完它之后，我修复了很多错误，除了一个：当在转盘中向上滑动时（即按.flex-next）它在到达最后一个图像后再次滑动三次，你可以按三个更多。

这是在到达最后一张图片后的滑块：

轮播看起来应该如何

在这种情况下，顶部箭头应该是不可点击的，但我可以再点击三次，然后轮播看起来像这样：

旋转木马的外观如何：

这里是代码： HTML

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

JS

$('.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'
            });
        }
    }
});

CSS

#carousel li {
  float: none !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

#carousel .flex-viewport{
  height: 457px;
}

#slider .flex-viewport, #slider .slides {
  height: 100%;
}

注意：当我切换.col-sm-9到#carousel和col-sm-3到#slider时，它不会发生。

非常感谢任何帮助！

flexslider垂直缩略图轮播

0 个答案: