Touch-enabled Image Carousel Slider Plugin For jQuery
| File Size: | 14.9 KB |
|---|---|
| Views Total: | 954 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A simple and easy-to-use jQuery carousel slider plugin that allows you to loop infinitely through a list of images with support for touch & gesture events on mobile devices.
How to use it:
1. Load the needed jQuery library and jQuery finger in the document.
<script src="jquery.js"></script> <script src="jquery.finger.js"></script>
2. Download and load the jquery.simple-carousel-slider.js script after jQuery library.
<script src="jquery.simple-carousel-slider.js"></script>
3. Don't forget load the jquery.simple-carousel-slider.css stylesheet for basic carousel styles.
<link rel="stylesheet" href="jquery.simple-carousel-slider.css">
4. Insert a list of images into a wrapper element.
<div class="sc-slider">
<ul class="sc-slides">
<li class="sc-slide">
<a href="#">
<img src="1.png">
</a>
</li>
<li class="sc-slide">
<a href="#">
<img src="2.png">
</a>
</li>
<li class="sc-slide">
<a href="#">
<img src="3.png">
</a>
</li>
</ul>
</div>
4. Call the plugin on the wrapper element and done.
$('.sc-slider').scSlider();
5. Customize the carousel slider.
$('.sc-slider').scSlider({
// autoplay interval
interval: 0,
// enable drag event
draggable: true,
// Prev indicator
// e.g. "<"
prev: null,
// Next indicator
// e.g. ">"
next: null
});
This awesome jQuery plugin is developed by Iwark. For more Advanced Usages, please check the demo page or visit the official website.










