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

});

Changelog:

2019-05-21

• JS update

2019-03-14

• Added thumbnail navigation

---

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