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中找到有关轨道的信息（因此我不建议在生产现场使用它）。

也许这对你有所帮助。

一切顺利

响应式图像轨道滑块

1 个答案: