Mobile-friendly Carousel Plugin - jQuery Eclipse Slider

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

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

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

  • Publication date: 07.03.2019
  • Source