不能用Orbit滑块滑动图像
问题描述:
我想用一个轨道滑块用HTML来显示4个不同的图像,但每次我到达第二个时,它都会停止滑动,无法向前,也不能向后。不能用Orbit滑块滑动图像
代码:
<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>◀</button>
<button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>▶</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>
答
您需要添加运动UI CSS,无论是在头部加载.css文件或SCSS捆绑它。
与NPM或鲍尔安装动态UI:
npm install motion-ui --save
bower install motion-ui --save
萨斯用法:
要导入的Sass文件到项目中,负载路径[modules_folder]/motion-ui/src
添加到您的萨斯配置,然后@import
的库:
@import 'motion-ui';
CSS用法:
- 未压缩:
[modules_folder]/motion-ui/dist/motion-ui.css
- 压缩:
[modules_folder]/motion-ui/dist/motion-ui.min.css