Responsive & Touch Ready jQuery Image Carousel Slider Plugin - Roundabout

File Size: Unknown
Views Total: 8280
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive & Touch Ready jQuery Image Carousel Slider Plugin - Roundabout

Roundabout is a lightweight and touch-friendly jQuery plugin for creating clean and responsive Image Carousel Sliders on your website.

Features:

  • Responsive design
  • Support touch swipe / dots / arrows navigation
  • Supports auto play and Infinite looping functions
  • Customizable speed of auto play and transition animation

How to use it:

1. Load the latest jQuery library and jQuery Roundabout plugin on the web page

<script type="text/javascript" src="js/roundabout.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<link rel="stylesheet" type="text/css" href="css/roundabout.css"/>

2. Create the html for the slider

<div class="slider">
<ul>
<li><img src="img/7.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/6.jpg"/></li>
</ul>
</div>

3. Call the plugin with options

$(document).ready(function(){
$('.slider').carousel({
autoplay: true, // Enables auto play of slides
autoplaySpeed: 3000, // Auto play change interval
dots: true, // dots navigation
arrows: true, // Next/Prev arrows
infinite: true, // Infinite looping
speed: 200 // Transition speed
swipe: true // touch swipe
});
});

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