Responsive Image Orbit Slider

Question

我有一個基金會6軌道滑塊，在桌面上顯示4列，每列一個圖像。用戶可以一次滾動瀏覽圖像4個縮略圖。

當屏幕尺寸打我的「小」的尺寸我想滑塊顯示1個縮略圖，而不是4

你可以看到，這是在這裏實現了頁：robertrhu.net/vail/tier1.html 。

它的圖像滑塊在藍色背景山的頂部。

這裏是我的4縮略圖滑塊代碼：

HTML：

<!--HTML FOR ORBIT THUMB IMAGE SLIDER--> 

<!--THUMB IMAGE SLIDER ROW--> 
<div 
    class="row" 
    id="thumb-slider-container"> 

<!--THUMB IMAGE SLIDER HEADING--> 
<h1> 
    Lorem Ipsum Dolor 
</h1> 
<!--END HOME POSTS SLIDER HEADING--> 

    <!--ORBIT SLIDER WRAPPER--> 
    <div 
     class="orbit" 
     role="region" 
     aria-label="Thumbnail Image Slider" 
     data-orbit 
     data-use-m-u-i="false" 
     data-option="autoplay:false;"> 

      <!--ORBIT SLIDER CONTAINER--> 
      <ul 
       class="orbit-container"> 

       <!--ORBIT SLIDER PREVIOUS ARROW BUTTON--> 
       <button 
        class="orbit-previous"> 
       <span 
        class="show-for-sr prev-slide"> 
       <i 
        class="icon-chevron-left"> 
       </i> 
       </span> 

       </button> 
       <!--END ORBIT SLIDER PREVIOUS ARROW BUTTON--> 

       <!--ORBIT SLIDER NEXT ARROW BUTTON--> 
       <button 
        class="orbit-next"> 
       <span 
        class="show-for-sr next-slide"> 
       <i 
        class="icon-chevron-right"> 
       </i> 
       </span> 

       </button> 
       <!--END ORBIT SLIDER NEXT ARROW BUTTON--> 

        <!--ORBIT POST SLIDES--> 

        <!--4 THUMBNAAIL GRID SLIDE FOR ORBIT SLIDER--> 
        <li 
        class="is-active orbit-slide"> 

        <!--GRID CLASS--> 
        <ul 
         class="row small-up-1 medium-up-4"> 

         <!--IMAGE COLUMN--> 
         <li 
         class="column"> 
         <img 
         src="assets/img/thumb-slider-image-1.jpg" 
         class="post-thumb-photo" /> 
         </li> 
        <!--END IMAGE COLUMN--> 

        <!--IMAGE COLUMN--> 
        <li 
        class="column"> 
        <img 
        src="assets/img/thumb-slider-image-1.jpg" 
        class="post-thumb-photo" /> 
       </li> 
       <!--END IMAGE COLUMN--> 

       <!--IMAGE COLUMN--> 
      <li 
       class="column"> 
       <img 
       src="assets/img/thumb-slider-image-1.jpg" 
       class="post-thumb-photo" /> 
       </li> 
      <!--END IMAGE COLUMN--> 

      <!--IMAGE COLUMN--> 
     <li 
     class="column"> 
      <img 
       src="assets/img/thumb-slider-image-1.jpg" 
       class="post-thumb-photo" /> 
      </li> 
     <!--END IMAGE COLUMN--> 

    </ul> 
    <!--END GRID CLASS--> 

</li> 
<!--4 THUMBNAAIL GRID SLIDE FOR ORBIT SLIDER--> 

      </ul> 
      <!--END ORBIT SLIDER CONTAINER--> 
    </div> 
    <!--END ORBIT SLIDER WRAPPER--> 
</div> 
<!--END THUMB IMAGE SLIDER ROW--> 

SCSS：

#thumb-slider-container { 
background-image: url('../img/thumb-image-slider-background.jpg'); 
background-repeat: no-repeat; 
background-size: 100% 100%; 
background-position: top left; 
padding: 2.5rem 5.313rem 3.125rem 5.313rem; 
max-width: 100%; 

h1 { 
    color: white; 
} 


    .orbit { 
     padding: 0 3.25rem 0px 3.5rem; 

     .orbit-container { 
      max-width: 1170px; 
      margin: 0 auto; 

      .orbit-slide { 
       max-width: 1170px; 
       margin: 0 auto; 

      ul { 
       margin-bottom: 0; 

       li.column { 

       &:last-child { 
        padding-right: 0; 
       } 

        img { 
         margin-bottom: 0; 
         &:last-of-type { 
          margin-right: 0; 

         } 

       } 
       } 
      } 
      } 


      } 

     } 


    } 

Answer 1

我已經檢查的頁面，但有英雄區域的視頻，沒有滑塊？我錯過了什麼，你有改變什麼嗎？

但是我建議使用貓頭鷹傳送帶2，因爲它有很多選項（如爲每個斷點設置幻燈片數量的選項）並且支持基礎（因此每張幻燈片都可以爲f6內的複雜佈局保存f6標記滑塊）。 http://www.owlcarousel.owlgraphic.com/

在F5軌道已被棄用，只爲原型。我從來沒有在F6中找到有關軌道的信息（所以我不建議在生產現場使用它）。

也許這可以幫助你。

所有最好的