Tiny Responsive Carousel Plugin With jQuery - jquery.carousel.js

carousel.js is a simple, lightweight, customizable jQuery slider plugin which enables you to present any HTML elements in a responsive carousel UI.

Features:

• Horizontal & vertical scrolling.
• Autoplay.
• Pause on hover.
• Easing functions.
• Custom indicators & trigger events.
• Easy to customize via CSS.

How to use it:

1. Create the element, indicator and navigation for the carousel.

<div class="carousel">
  <ul>
    <li style="background:#0275d8;">Slide 1</li>
    <li style="background:#5cb85c;">Slide 2</li>
    <li style="background:#5bc0de;">Slide 3</li>
    <li style="background:#f0ad4e;">Slide 4</li>
    <li style="background:#d9534f;">Slide 5</li>
  </ul>
  <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>
  <span class="prev"></span>
  <span class="next"></span>
</div>

2. The example CSS to style the carousel and its controls.

.carousel {
  width: 1000px;
  height: 500px;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.carousel ul {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel ul li {
  position: absolute;
  background: #999;
  line-height: 500px;
transition:;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 100px;
}

.carousel ul li img { max-width: 100%; }

.carousel ol {
  position: absolute;
  z-index: 3;
  cursor: default;
  bottom: 20px;
  height: 23px;
  left: 0;
  text-align: center;
  width: 100%;
}

.carousel ol li {
  width: 30px;
  height: 0;
  cursor: pointer;
  opacity: 0.2;
  padding-top: 20px;
  border-bottom: 3px solid #fff;
  display: inline-block;
  margin: 0 2px;
}

.carousel ol li.active, .carousel ol li:hover { opacity: 1; }

.carousel .prev, .carousel .next {
  display: inline-block;
  z-index: 4;
  width: 100px;
  height: 100%;
  position: absolute;
  transition: opacity 0.3s;
  line-height: 50px;
  opacity: 0.5;
  top: 0;
  cursor: pointer;
}

.carousel .prev {
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0));
}

.carousel .next {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0));
}

.carousel .prev:hover, .carousel .next:hover { opacity: 1; }

3. Include both jQuery JavaScript library and jquery.carousel.js script at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.carousel.js"></script>

4. Initialize the plugin render a default carousel on the webpage.

$(".carousel").carousel();

5. Override the default settings as display below to customize the carousel as per your needs.

$(".carousel").carousel({
  type : "x", // or y
  interval : 3500,
  autoPlay : true,
  speed : 500,
  mouseoverStop : true,
  animate : true,
  easing : "swing", // easing function
  indicatorEvent : "click",
  indicatorActive : "active",
  timer : setIntervalID
});

Change log:

2017-09-14

• JS update

---

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