Submit your widget

A jQuery carousel plugin with swipe support

Created 9 months ago   Views 6548   downloads 927    Author AlexEmashev
A jQuery carousel plugin with swipe support
View DemoDownload 437.3 KB
19
Share |

This is a tiny jQuery plugin that represents image slider (carousel). Slider supports mouse and touch inputs to slide through images. Also the slider supports HTML content.

Features

  • mouse and touch (swipe) support;
  • next, previous buttons;
  • bullets to change current slide;
  • can work with images as well as HTML;
  • various options (animation effect, timings, enable, disable certain properties);
  • using css transition to change slides (so it should be video accelerated);
  • responsiveness, can take up available space and shrink images to fit slider if needed;

Installation

Installation Using Bower

 

Use following command: bower install swipeslider or bower install swipeslider --save to save to your project as dependency.

Manual Installation

Add these two files to your page: swipeslider.min.js swipeslider.css

You'll also need to add jQuery library if it's not already.

Within your HTML add markup for slides, something like that:

<figure id="sample_slider" class="swipeslider">
<ul class="sw-slides">
  <li class="sw-slide">
    <img src="img/lang_yie_ar_kung_fu.jpg" alt="Lang from Yie Ar Kung Fu">
  </li>
  <li class="sw-slide">
    <img src="img/summer_beach.jpg" alt="Summer beach concept">
  </li>
  <li class="sw-slide">
    <img src="img/borderlands_tiny_tina.jpg" alt="Tiny Tina from Borderlands 2">
  </li>
  <li class="sw-slide">
    <img src="img/redhead.jpg" alt="Redhead girl">
  </li>
</ul>
</figure>

Read more:https://github.com/AlexEmashev/swipeslider

Tag: slideshow