slider - 我们可以使用 flexslider 制作垂直缩略图滑块吗？

Question

嗨，我通常使用 flexslider。现在我需要一个缩略图滑块。但是缩略图应该是垂直的，它应该有箭头，并且在单击它时必须向上和向下滚动..这可能与 flex 滑块吗？你们能帮帮我吗？

这是我的代码...

  <section class="gallery-details-wrap row-fluid">
   <div id="slider" class="gallery-details-slider flexslider">
      <ul class="slides">
         <li>
            <img alt="" src="images/gallery-details-slider-1.jpg">
         </li>
         <li>
            <img alt="" src="images/gallery-details-slider-1.jpg">
         </li>
         <li>
            <img alt="" src="images/gallery-details-slider-1.jpg">
         </li>
         <li>
            <img alt="" src="images/gallery-details-slider-1.jpg">
         </li>
         <li>
            <img alt="" src="images/gallery-details-slider-1.jpg">
         </li>
         <li>
            <img alt="" src="images/gallery-details-slider-1.jpg">
         </li>
         <!-- items mirrored twice, total of 12 -->
      </ul>
   </div>
   <div id="carousel" class="gallery-details-carousel flexslider">
      <ul class="slides">
         <li>
            <img alt="" src="images/gallery-details-thumb-1.jpg">
         </li>
         <li>
            <img alt="" src="images/gallery-details-thumb-1.jpg">
         </li>
         <li>
            <img alt="" src="images/gallery-details-thumb-1.jpg">
         </li>
         <li>
            <img alt="" src="images/gallery-details-thumb-1.jpg">
         </li>
         <li>
            <img alt="" src="images/gallery-details-thumb-1.jpg">
         </li>
         <li>
            <img alt="" src="images/gallery-details-thumb-1.jpg">
         </li>
         <!-- items mirrored twice, total of 12 -->
      </ul>
   </div>
</section>

我的剧本...

$(window).load(function(){ $('.gallery-details-carousel').flexslider({ animation: "slide", controlNav: false, directionlNav: true, animationLoop: false, slideshow: false, itemWidth: 111, itemMargin: 5, maxItems: 5, asNavFor: '.gallery-details-slider', });

$('.gallery-details-slider').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, sync: ".gallery-details-carousel", start: function(slider) { $('body').removeClass('loading'); } }); });

标签： sliderthumbnailsflexslider