图像不会在轨道滑块基础上滑动
Posted
技术标签:
【中文标题】图像不会在轨道滑块基础上滑动【英文标题】：Images dont slide in orbit slider Foundation 【发布时间】：2015-06-29 17:29:59 【问题描述】：我正在尝试将 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" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li class="active">
<img src="assets/images/paisaje2.jpg" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="assets/images/paisaje3.jpg" />
<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>
【问题讨论】：
【参考方案1】：看起来您的页面上混合了预呈现的 HTML 和呈现的 HTML。您不需要标有 cmets 的代码块（导航箭头、幻灯片编号、计时器、项目符号等）； Foundation 将为您呈现它们。
此外，您的class="example-orbit" 可能会产生干扰，除非您需要它，否则我建议您将其删除。
重要提示：根据基金会网站，“Orbit 已被弃用，这意味着它不再受支持。”他们officially recommend 使用不同的图像滑块而不是他们的轨道。
【讨论】：
你是对的斯蒂芬妮。我决定使用 Slick 并且我得到了很好的结果。但是我在设置图像的宽度时遇到了麻烦。我要打开一个新帖子，因为我真的被卡住了。感谢您的帮助 好的，我刚刚解决了这个问题。我可以通过向所有图像添加一个css类并设置宽度来设置宽度：1000px；它似乎工作正常以上是关于图像不会在轨道滑块基础上滑动的主要内容，如果未能解决你的问题，请参考以下文章
当滑块按钮超过最大值的 60% 时，UISlider 最大轨道图像使用最小轨道图像