responsive carousel for your website

A jQuery-based script for responsive carousels that work with mouse, touch, and keyboard

How To Use: 

In your web page:

<script src="jquery.js"></script>
<script src="dist/responsive-carousel.min.js"></script>
<link href="src/responsive-carousel.css" rel="stylesheet">

<div class="carousel">
 <div>
 <!-- carousel item content here -->
 </div>
 <div>
 <!-- carousel item content here -->
 </div>
</div>

 

The default build includes the slide/drag transition that you can apply by adding a data attribute and including some additional CSS.

<script src="jquery.js"></script>
<script src="dist/responsive-carousel.min.js"></script>
<link href="src/responsive-carousel.css" rel="stylesheet">
<link href="src/responsive-carousel.slide.css" rel="stylesheet">

<div class="carousel" data-transition="slide">
 <div>
 <!-- carousel item content here -->
 </div>
 <div>
 <!-- carousel item content here -->
 </div>
</div>

 

Extended features

There are other extensions in the src folder, such as flip and fade transitions, autoplay, keyboard handling, pagination, and more. If you’d like to create a build that includes certain extensions, just add them to the JS files listed under concat in the /grunt.js file, and run grunt from a command line.

DEMO:

• Default, no transitions


• Default, no revolving content


• Fade transitions


• Fade with autoplay


• Slide transition with touch


• Slide transition with touch and arrow keys


• Autoplay slide transition with touch and arrow keys


• Ajax-included extra slides (w/ slide transition)


• Flip transition with touch


• Flip transition with touch & autoplay


• Default with pagination links


• Dynamic responsive containers


• Default with Styled Arrows


• Default with Peeking next/prev

Download: 

Download THIS responsive carousel for your website

Preventing Content Looping

The default carousel (responsive-carousel.js) returns to the initial active item(s) once it reaches the end of its list. This behavior can be disabled by annotating the carousel DOM element with data-loop='false' and including responsive-carousel.loop.js directly after the core carousel JS. For example:

...
<script src="path/to/responsive-carousel.js"></script>
<script src="path/to/responsive-carousel.loop.js"></script>
...

<div class="carousel" data-loop="false">
 <div>
 <img src="...">
 </div>

 ...
</div>

 

Then, after both the carousel and plugin have loaded you can initialize as normal.

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

 

When the carousel reaches the end or beginning of the list, the inserted navigation links (a.next anda.prev) will be decorated with an additional disabled class. This class receives no properties from the library by default.

responsive carousel for your website