レスポンシブ・イメージ・オービット・スライダ

Question

私は、デスクトップ上に4列、各列にイメージを表示するFoundation 6軌道スライダを使用しています。ユーザーは、一度に4つのサムネイルをスクロールすることができます。画面サイズが私の「小さな」サイズをヒットすると

私はスライダーあなたは、これはここで実装されたページを見ることができる代わりに、4

の1枚のサムネイルを表示したい：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を使用することをお勧めしたいと思います（すべてのスライドは、スライダー）。 http://www.owlcarousel.owlgraphic.com/

F5軌道では推奨されていませんでした。プロトタイプ用です。私はF6の軌道に関する情報を見つけたことはありませんでした（私はプロダクションサイトimhoで使用することは推奨しません）。

これはおそらくあなたを助けます。

すべて最高