Mobile-friendly Carousel Plugin - jQuery Eclipse Slider

Eclipse is a lightweight any content slider jQuery plugin which helps developers to create responsive, mobile-friendly carousels on the web app.

More features:

• Fully responsive.
• Supports touch events.
• Configurable autoplay behavior.
• Slider controls.
• Allows to specify the number of slides to show at a time.
• Easy to customize using your own CSS.

How to use it:

1. Link to jQuery library and the Eclipse Slider's files.

<link rel="stylesheet" href="/path/to/eclipse.css">
<script src="/path/to/jquery.min.js"></script>
<script src="eclipse.js"></script>

2. Add a group of slides to the carousel slider.

<div id="eclipse-example">
  <div class="eclipse-slider">
    <div>First</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>Last</div>
  </div>
</div>

3. Call the function on the top container to generate a basic carousel slider.

$(function(){
  $('#eclipse-example').eclipse();
});

4. Enable & config the autoplay functionality.

$('#eclipse-example').eclipse({
  // default: false
  autoplay: true,
  // default: 3000
  interval: 5000
  
});

5. The plugin also allows multiple slides to move at a time.

$('#eclipse-example').eclipse({
  // default: 1
  slidesToShow: 3,
  // default: 1
  slidesToMove: 3
});

6. More configuration options with default values.

$('#eclipse-example').eclipse({
  // namespace
  nameSpace: 'eclipse',
  // 0 = first slide
  startIndex: 0,
  // 0 = first slide
  countIndex: 0, 
  // enable arrow navigation
  arrow: true,
  // enable pagination bullets
  pager: true,
  // animation speed
  speed: 500,
  // space betwen slides
  margin: 0,
  // for touch swipe & mouse move
  // in pixels
  friction: 200
});

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