[英]Images dont slide in orbit slider Foundation
我正在嘗試將Foundation Orbit Slider添加到我的網頁。 它看起來很簡單,我必須看到圖像以及上一個和下一個按鈕,但是如果我單擊上一個和下一個按鈕,則軌道滑塊完全不會移動。 圖片不滑動,我也不知道為什么,因為我看過很多例子,我認為我的代碼看起來一樣。 任何幫助將不勝感激
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="altiria webapp">
<link rel="stylesheet" href="assets/css/foundation.min.css">
<link rel="stylesheet" href="assets/css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/jquery-ui.css">
<link rel="stylesheet" href="assets/css/jquery-ui.structure.css">
<link rel="stylesheet" href="assets/css/jquery-ui.theme.css">
<link rel="stylesheet" href="assets/css/app.css">
<script src="assets/js/modernizr.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<script src="assets/js/foundation.min.js"></script>
</head>
<body>
<div class="orbit-container">
<ul class="example-orbit" data-orbit>
<li>
<img src="assets/images/paisaje1.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li class="active">
<img src="assets/images/paisaje2.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="assets/images/paisaje3.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>
<!-- Timer and Play/Pause Button -->
<div class="orbit-timer">
<span></span>
<div class="orbit-progress"></div>
</div>
</div>
<!-- Bullets -->
<ol class="orbit-bullets">
<li data-orbit-slide-number="1"></li>
<li data-orbit-slide-number="2" class="active"></li>
<li data-orbit-slide-number="3"></li>
</ol>
<script>
$(document).foundation();
</script>
</body>
看起來您的頁面上混合了預渲染的HTML和渲染的HTML。 您不需要帶有注釋標簽的代碼塊(導航箭頭,幻燈片編號,計時器,項目符號等); 基金會將為您呈現它們。
另外,您的class="example-orbit"
會造成干擾,除非您需要,否則建議將其刪除。
需要注意的重要事項:根據基金會網站的說法,“不建議使用軌道,這意味着它不再受支持。” 他們正式建議使用其他圖像滑塊而不是其軌道。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.