Responsive Horizontal Carousel Plugin For jQuery - Carousel.js

File Size: 127 KB
Views Total: 9272
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Responsive Horizontal Carousel Plugin For jQuery - Carousel.js

Carousel.js is a lightweight and easy-to-use jQuery plugin for creating a responsive, infinite carousel slider that auto resizes child elements to fit the width of the browser window.

How to use it:

1. Place jQuery library and the jQuery carousel.js script at the end of the document.

<script src="//"></script>
<script src="jquery-carousel.js"></script>

2. The html to create a basic image carousel slider.

<div id="slider-carousel">

  <!-- Slider navigation -->
  <div class="wrapper-setas">
    <a href="#" class="seta-dir setaDir">
      <em class="sprite seta-pag-dir-md"></em>
    <a href="#" class="seta-esq setaEsq">
      <em class="sprite seta-pag-esq-md"></em>
    <div class="clear"></div>

  <!-- Slider content -->
  <div id="container-slider-carousel" class="container">
    <div id="content-silder-carousel" class="content">
      <div class="wrapper-itens">
        <div class="item"><span><img src="l.jpg" alt="" class="img-responsive"></span></div>
        <div class="item"><span><img src="2.jpg" alt="" class="img-responsive"></span></div>
        <div class="item"><span><img src="3.jpg" alt="" class="img-responsive"></span></div>
        <div class="item"><span><img src="4.jpg" alt="" class="img-responsive"></span></div>
      <div class="clear"></div>

3. Apply the required CSS styles to the carousel slider.

.clear {
  clear: both !important;
  float: none !important;
  margin: 0px !important;
  padding: 0px !important;
  height: 0px !important;
  width: 0px !important

.img-responsive {
  height: auto;
  width: 100%;

#slider-carousel {
  position: relative;
  width: 100%;
  padding: 10px 0 0 0;
  margin-bottom: 5px;

#container-slider-carousel {
  width: 620px;
  position: relative;
  overflow: hidden;
  height: auto;

#content-silder-carousel {
  width: 5000px;
  position: relative;
  left: 0;

#content-silder-carousel .item {
  width: 200px;
  float: left;
  background-color: #CCC;
  margin-right: 10px;

#slider-carousel .wrapper-setas { margin: 0 0 10px 0; }

#slider-carousel .wrapper-setas a {
  float: right;
  margin-left: 10px;

4. Call the function with options.


  // callback
  activate: function(){}, 

  // animation speed

  // endless looping

  // number of items to be moved by clicking on the arrows

  // width of of the carousel items

  // minimum width of the carousel slider

Change logs:



  • Mobile navigation added


  • more responsive


  • fixed navigation arrows.


  • JS update.

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