Can´t slide images with Orbit slider

Question

I'm trying to use a orbit slider with HTML into displaying 4 different images but every time I get to the second it stops sliding, can´t do it forwards, neither backwards.

Code:

 <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

You need to add the Motion UI CSS, either load the .css file in the head or bundle it in SCSS.

Install Motion UI with npm or Bower:

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

Sass usage:

To import the Sass files into a project, add the load path [modules_folder]/motion-ui/src to your Sass configuration, then @import the library:

@import 'motion-ui';

CSS usage:

• Uncompressed: [modules_folder]/motion-ui/dist/motion-ui.css
• Compressed: [modules_folder]/motion-ui/dist/motion-ui.min.css

Issue on GitHub

Motion UI install documentation