响应式图像轨道滑块

Question

我有一个 Foundation 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

我一直在查看页面，但是英雄区域有视频，没有滑块？我错过了什么吗，你有什么改变吗？

但我建议使用 owl carousel 2，因为它有大量选项（例如为每个断点设置幻灯片数量的选项）并支持基础（因此每张幻灯片都可以为滑块内的复杂布局保存 f6 标记）。 http://www.owlcarousel.owlgraphic.com/

F5 轨道已弃用，仅用于原型制作。我从未在 F6 中找到有关轨道的信息（所以我不建议在生产站点上使用它恕我直言）。

也许这对你有帮助。

一切顺利