軌道スライダで画像をスライドできない

Question

私は4つの異なる画像を表示するために、HTMLで軌道スライダを使用しようとしていますが、2番目に移動するたびにスライドを止め、前方にも後方にも行うことはできません。

コード：

<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

あなたはモーションUI CSSを追加し、いずれかの頭の中で.cssファイルをロードしたり、SCSSでそれをバンドルする必要があります。

NPMまたはバウアーとモーションUIのインストール：

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

サス用法：

あなたのサス構成に負荷パス[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

Issue on GitHub

Motion UI install documentation