在Orbit Fundation 6中使用不同宽度的图像

时间:2019-05-30 22:12:12

标签: html css zurb-foundation zurb-foundation-5 orbit

我正在尝试将Orbit用作照片的转盘。我的问题是,因为我有成千上万张不同宽度的图像,所以我需要看到几张图像一起完成整个屏幕的宽度,而不是一张图像。

我尝试将项目符号用作幻灯片,但由于它们是固定的,因此无法使用。

            <div class="orbit" role="region" aria-label="carusel" data-orbit>
              <div class="orbit-wrapper">
                <div class="orbit-controls">
                  <button class="orbit-previous"><img src="img/bbth-arrowprev.png" alt="" /></button>
                  <button class="orbit-next"><img src="img/bbth-arrownext.png" alt="" /></button>
                </div>
                <!--<ul class="orbit-container">
                  <li class="orbit-slide is-active"><figure class="orbit-figure"><img src="upload/pfizer-01.jpg" alt="" /></figure></li>
                  <li class="orbit-slide"><figure class="orbit-figure"><img src="upload/tira-01.jpg" alt="" /></figure></li>
                  <li class="orbit-slide"><figure class="orbit-figure"><img src="upload/tira-02.jpg" alt="" /></figure></li>
                  <li class="orbit-slide"><figure class="orbit-figure"><img src="upload/tira-03.jpg" alt="" /></figure></li>
                </ul>-->
                <nav class="orbit-bullets">
                  <button class="is-active" data-slide="0"><img src="upload/pfizer-01.jpg" alt="" /></button>
                  <button data-slide="1"><img src="upload/tira-01.jpg" alt="" /></button>
                  <button data-slide="2"><img src="upload/tira-02.jpg" alt="" /></button>
                  <button data-slide="3"><img src="upload/tira-03.jpg" alt="" /></button>
                  <button data-slide="4"><img src="upload/tira-04.jpg" alt="" /></button>
                  <button data-slide="5"><img src="upload/tapa-bazaar.jpg" alt="" /></button>
                </nav>
              </div>
            </div>

我尝试使用Foundation外部的转盘,但是它在代码中产生了错误。

0 个答案:

没有答案