Можем ли мы сделать вертикальный слайдер миниатюр с помощью flexslider? - PullRequest
Новая
       69

Можем ли мы сделать вертикальный слайдер миниатюр с помощью flexslider?

0 голосов
/ 31 мая 2018

Привет, я обычно использую flexslider.Теперь мне нужен слайдер Thumnail.Но миниатюра должна быть вертикальной, на ней должны быть стрелки, и, нажимая на нее, нужно прокручивать вверх и вниз. Возможно ли это с помощью ползунка 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>

Мой скрипт ...

$ (окно) .load (function () {$ ('. gallery-details-carousel'). flexslider ({animation: "slide", controlNav: false, directionlNav: true, animationLoop: false, слайд-шоу: false, itemWidth: 111, itemMargin: 5, maxItems: 5, asNavFor: '.gallery-details-slider',});

$ ('. gallery-details-slider'). flexslider ({animation: "slide", controlNav: false, animationLoop: false, слайд-шоу:false, синхронизация: ".gallery-details-carousel", start: function (slider) {$ ('body'). removeClass ('loading');}});});

...