Responsive Touch-enabled jQuery Carousel Plugin - jCider

jCider is a simple, flexible jQuery plugin which makes it easier to create a responsive, mobile-friendly slider carousel with opacity or slide transitions between slides.

Basic usage:

1. Include the jQuery jCider plugin's JS and CSS files on the web page. Be sure the jcider.min.js is included after jQuery library, but before the closing body tag.

<link href="jcider.css" rel="stylesheet">
  ...
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="jcider.min.js"></script>

2. Insert a list of content slides into the carousel.

<div class="slider demo">
  <ul>
    <li>
      <h3>Slide 1</h3>
    </li>
    <li>
      <h3>Slide 2</h3>
    </li>
    <li>
      <h3>Slide 3</h3>
    </li>
  </ul>
</div>

3. Add custom CSS styles to the carousel.

.slider {
  width: 80%;
  height: 350px;
  border-radius: 10px;
  color: #fff;
  margin: 20px auto
}

.slider ul {
  padding: 0;
  margin: 0
}

.slider li { list-style: none }

.slider li:nth-child(1) { background: #3498db }

.slider li:nth-child(2) { background: #34cf75 }

.slider li:nth-child(3) { background: #34495e }

4. Initialize the carousel with default options.

$(document).ready(function(){
  $('.demo').jcider();
});

5. You can pass some configuration options at initialization as an object.

// visible no. of slides
visibleSlides: 1, 

// For looping
looping: true, 

// enable fading/sliding effect
fading: false, 

// easing effect
easing: 'ease-in-out', 

// shows carousel contrils
controls: true, 

// shows carousel pagination
pagination: true, 

// transition duration in ms
transitionDuration: 400, 

// enable autoplay
autoplay: false,

// autoplay interval
slideDuration: 3000,

// For visibility of nav-arrows
controls: true, 

// Element for nav wrapper
controlsWrapper: 'div.jcider-nav', 

// Element for nav-left 
controlsLeft: ['span.jcider-nav-left', ''], 

// Element for nav-right
controlsRight: ['span.jcider-nav-right', ''], 

// For visibility of pagination
pagination: true, 

// Element for pagination wrapper
paginationWrapper: 'div.jcider-pagination', 

// Element for pagination points
paginationPoint: 'div.jcider-pagination-point' 

Changelog:

v3.0.7 (2020-04-27)

• changed metadata

v3.0.6 (2015-10-21)

• fixed fading bug

v3.0.5 (2015-10-10)

• add more options.

---

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