Simple Cross-platform Background Slider Plugin With jQuery - Morda

Morda is a simple, cross-platform jQuery plugin which lets you create a responsive, touch-enabled background image slider with smooth animations.

More features:

• Auto resizes images depending on the screen size.
• Keyboard/Arrow/Dot navigation.
• Supports swipe events on touch devices.
• Autoplay with pause on hover.
• Dead simple to use and CSS less.
• Smooth animations with variable speed.

How to use it:

1. Add a group of background images into the slider using html5 data-bg attribute:

<div id="slider">  
  <section data-bg="1.jpg"></section>
  <section data-bg="2.jpg"></section>
  <section data-bg="3.jpg"></section>
  <section data-bg="4.jpg"></section>
  <section data-bg="5.jpg"></section>
</div>

2. Set the width/height for the slider.

#slider {
  width: 100%;
  height: 100%;
}

3. Download and put the jQuery Morda plugin's script after you've loaded jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="morda.js"></script>

4. Initialize the slider with default options.

$("#slider").Morda();

5. To customize the slider, just pass the following options as an object during initialization.

$("#slider").Morda({
  //  Animation speed in ms
  speed: 600,
  
  //  Navigation visible
  navigation: true,
  
  //  Arrows visible
  arrows: true,
  
  //  Autoplay slides
  autoplay: false,
  
  //  Autoplay delay (ms)
  autoplayDelay: 5000,
  
  //  Autoplay pause on cursor over slider
  autoplayPause: false,
  
  //  Arrays color
  arraysColor: "#fff",
  
  //  Active navigation item color
  navColor: "#fff",
  
  //  Active navigation item color
  activeNavColor: "#fff"
});

---

This awesome jQuery plugin is developed by yermolaev. For more Advanced Usages, please check the demo page or visit the official website.