好的,所以我正在尝试使用 Foundations Orbit 媒体容器。我更擅长 HTML/CSS,但几乎没有 JS 经验。但!要找到一个自动播放的 CSS/HTML 图像 slider 是……不可能的。或者贵。无论如何,我正在尝试使用 Foundation Docs 页面上的 Orbit one,但我想我搞砸了。谁能帮我?以下是代码片段:
HTML
<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 文件中,因为它告诉我...我不确定从这里去哪里。
最佳答案
看来您缺少初始化轨道脚本所必需的“数据轨道”元素。
<ul data-orbit></ul>
很难说这是否是唯一没有可用示例的问题,但这将是最明显的起点。
Zurb 有关于设置的有用文档。 http://foundation.zurb.com/docs/components/orbit.html
如基金会文档中所述,orbit 已被弃用;但是它仍然可以在较新的版本中使用。
Slick carousel 的设置非常简单,如果您想尝试其他图像 slider ,则可以免费使用。
http://kenwheeler.github.io/slick/
希望这对您有所帮助。
关于html - Foundation Orbit 图像 slider 无法正常工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27256390/