无法使用 Orbit 滑块滑动图像

Question

我正在尝试使用带有 HTML 的轨道滑块来显示 4 个不同的图像，但每次我到达第二个时它就停止滑动，不能向前滑动，也不能向后滑动。

代码：

 <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>

      <ul class="orbit-container">

        <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
        <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
        <li class="orbit-slide is-active">
          <img src="C:\Users\JuanFelipe\Desktop\DB\Samsung 2.jpeg">
        </li>
        <li class="orbit-slide">
          <img src="C:\Users\JuanFelipe\Desktop\DB\Iphone 2.jpeg">
        </li>
        <li class="orbit-slide">
          <img src="C:\Users\JuanFelipe\Desktop\DB\Motorola 1.jpeg">
        </li>
        <li class="orbit-slide">
          <img src="C:\Users\JuanFelipe\Desktop\DB\Iphone 3.jpeg">
        </li>
      </ul>
    </div>

Answer 1

您需要添加Motion UI CSS，要么在头部加载.css文件，要么在SCSS.[=18=中打包。 ]

使用 npm 或 Bower 安装 Motion UI：

npm install motion-ui --save
bower install motion-ui --save

Sass用法：

要将 Sass 文件导入项目，请将加载路径 [modules_folder]/motion-ui/src 添加到您的 Sass 配置，然后 @import 库：

@import 'motion-ui';

CSS用法：

未压缩：[modules_folder]/motion-ui/dist/motion-ui.css
压缩：[modules_folder]/motion-ui/dist/motion-ui.min.css

Issue on GitHub

Motion UI install documentation

无法使用 Orbit 滑块滑动图像

Can´t slide images with Orbit slider

html

slider

orbit