Touch-enabled Image Carousel Slider Plugin For jQuery

Touch-enabled Image Carousel Slider Plugin For jQuery
File Size: 14.9 KB
Views Total:
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.