Question

好吧，所以我正在尝试使用Foundations Orbit媒体容器。我对HTML / CSS更好，几乎没有使用JS的经验。但！要查找自动播放CSS / HTML图像滑块是......不可能的。还是贵的。无论如何，我正试图在Foundation Docs页面上使用Orbit，但我想我搞砸了。谁能帮我？这是代码片段：

HMTL

  <div class="row">
      <div class="large-12 columns">
        <div class="panel">
    <div class="orbit-container">       
    <ul>
  <li>
    <img src="assets/infinity.png" alt="slide 1" />
  </li>
  <li class="active">
    <img src="assets/Image1.png" alt="slide 2" />
  </li>
  <li>
    <img src="assets/image2.png" alt="slide 3" />
  </li>
</ul>

这是CSS。这不是完整的CSS，但我很确定我正在识别Orbit HTML错误。我的油炸大脑现在无法理解它。

/* Orbit Graceful Loading */
.slideshow-wrapper {
  position: relative; }
  .slideshow-wrapper ul {
    list-style-type: none;
    margin: 0; }
    .slideshow-wrapper ul li,
    .slideshow-wrapper ul li .orbit-caption {
      display: none; }
    .slideshow-wrapper ul li:first-child {
      display: block; }
  .slideshow-wrapper .orbit-container {
    background-color: transparent; }
    .slideshow-wrapper .orbit-container li {
      display: block; }
      .slideshow-wrapper .orbit-container li .orbit-caption {
        display: block; }
    .slideshow-wrapper .orbit-container .orbit-bullets li {
      display: inline-block; }
  .slideshow-wrapper .preloader {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px;
    border: solid 3px;
    border-color: #555555 white;
    border-radius: 1000px;
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; }

.orbit-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  background: none; }
  .orbit-container .orbit-slides-container {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    -webkit-transform: translateZ(0); }
    .orbit-container .orbit-slides-container img {
      display: block;
      max-width: 100%; }
    .orbit-container .orbit-slides-container > * {
      position: absolute;
      top: 0;
      width: 100%;
      margin-left: 100%; }
      .orbit-container .orbit-slides-container > *:first-child {
        margin-left: 0%; }
      .orbit-container .orbit-slides-container > * .orbit-caption {
        position: absolute;
        bottom: 0;
        background-color: rgba(51, 51, 51, 0.8);
        color: white;
        width: 100%;
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem; }

我将所有JS文件放在我的HTML文件中，因为它告诉我......我不确定从哪里开始。

Answer 1

您似乎缺少初始化轨道脚本所需的“数据轨道”元素。

<ul data-orbit></ul>

如果没有一个有效的例子，很难说这是唯一的问题，但这将是最明显的起点。

Zurb提供了有关设置的有用文档。 http://foundation.zurb.com/docs/components/orbit.html

如基金会文件中所述，轨道已被弃用;但它仍然适用于较新的版本。

光滑的轮播设置非常简单，如果您想尝试替代图像滑块，则可以免费使用。

http://kenwheeler.github.io/slick/

希望这会有所帮助。

Foundation Orbit图像滑块运行不正常？

1 个答案: