图像不会在轨道滑块中滑动

Question

I'm trying to add Foundation Orbit Slider to my web page. 我正在尝试将Foundation Orbit Slider添加到我的网页。 It looks easy and I've got to see the images and the prev & next buttons, but if I click on prev and next buttons the orbit slider doesn't move at all. 它看起来很简单，我必须看到图像以及上一个和下一个按钮，但是如果我单击上一个和下一个按钮，则轨道滑块完全不会移动。 The images doesn't slide and I don't know why, beacuse I've seen many examples and I think my code looks the same. 图片不滑动，我也不知道为什么，因为我看过很多例子，我认为我的代码看起来一样。 Any help woud be appreciated 任何帮助将不胜感激

<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>

在此处输入图片说明

Answer 1

It looks like you have a mix of the pre-rendered HTML and rendered HTML on your page. 看起来您的页面上混合了预渲染的HTML和渲染的HTML。 You don't need the chunks of code labeled with comments (navigation arrows, slide numbers, timer, bullets, etc); 您不需要带有注释标签的代码块（导航箭头，幻灯片编号，计时器，项目符号等）； Foundation will render them for you. 基金会将为您呈现它们。

In addition, it's possible that your class="example-orbit" is interfering and, unless you need it, I'd suggest removing it. 另外，您的class="example-orbit"会造成干扰，除非您需要，否则建议将其删除。

Important to note: According to the Foundation website, "Orbit has been deprecated, meaning that it is no longer supported." 需要注意的重要事项：根据基金会网站的说法，“不建议使用轨道，这意味着它不再受支持。” They officially recommend using a different image slider instead of their orbit. 他们正式建议使用其他图像滑块而不是其轨道。

图像不会在轨道滑块中滑动

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-06-30 19:36:06

图像不会在轨道滑块中滑动

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-06-30 19:36:06

解决方案1
2 已采纳 2015-06-30 19:36:06