程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

Foundation Orbit Slider:参考索引的导航箭头

发布于2022-05-23 22:46     阅读(918)     评论(0)     点赞(15)     收藏(1)


使用 Foundation: Orbit Slider 时,导航箭头不会将我带到下一张幻灯片,而是每次都返回索引页面。

标记`

<div class="row full-width" id="portfolio">
        <div class="orbit-container">
          <ul data-orbit class="example-orbit orbit-slides-container">
            <li>
              <img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider2.jpg" alt="slide 1" />
              <div class="orbit-caption">
                Caption One.
              </div>
            </li>

            <li class="active">
              <img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider2.jpg" />
              <div class="orbit-caption">
                Caption Two.
              </div>
            </li>

            <li>
              <img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider3.jpg" alt="slide 3" />
              <div class="orbit-caption">
                Caption Three.
              </div>
            </li>
          </ul>

          <!-- Navigation Arrows -->
          <a href="#" class="orbit-prev">Prev <span></span></a>
          <a href="#" class="orbit-next">Next <span></span></a>

          <!-- Slide Numbers -->
          <div class="orbit-slide-number">
            <span>1</span> of <span>3</span>
          </div>`

解决方案


试试下面的。删除以下类和行(它们由 JS 自动添加):

  • example-orbit
  • orbit-slides-container
  • active
  • 之后的一切<\ul>

将结束标签添加到<div class="orbit-container">

所以你的代码将是这样的:

<div class="row full-width" id="portfolio">
    <div class="orbit-container">
      <ul data-orbit="">
        <li>
          <img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider2.jpg" alt="slide 1" />
          <div class="orbit-caption">
            Caption One.
          </div>
        </li>

        <li>
          <img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider2.jpg" />
          <div class="orbit-caption">
            Caption Two.
          </div>
        </li>

        <li>
          <img src="/Users/benhare/Desktop/foundation/portfolio/assets/slider3.jpg"   alt="slide 3" />
          <div class="orbit-caption">
            Caption Three.
          </div>
        </li>
      </ul>
    </div>
  </div>

<div class="orbit-container">放入一个附加的 div中也是一个好主意class="large-12 columns",并在第一张和第二张幻灯片中使用不同的图像。我没有其他想法。我也花了一段时间才弄清楚 Orbit 是如何正确工作的。




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/360639/0a9433da6cb0778ed8db/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

15 0
收藏该文
已收藏

评论内容:(最多支持255个字符)