Mobile-friendly Carousel Plugin - jQuery Eclipse Slider

Mobile-friendly Carousel Plugin - jQuery Eclipse Slider
File Size: 60.5 KB
Views Total: 5792
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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">

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


4. Enable & config the autoplay functionality.


  // default: false
  autoplay: true,

  // default: 3000
  interval: 5000

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


  // default: 1
  slidesToShow: 3,

  // default: 1
  slidesToMove: 3


6. More configuration options with default values.


  // 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





  • 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.