Image Slider With Swipe
About
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>Add following script to make things going:
<script> $(window).load(function() { $('#sample_slider').swipeslider(); }); </script>Do not forget to add at least height to your slider via css.
How To Customize
Plugin Settings
Plugin can be customized via JavaScript object. For example:
$('#sample_slider').swipeslider({autoPlay: false, swipe: false});| Property | Default | Description |
|---|---|---|
| sliderHeight | '60%' | Height of the slider block. Set in percents if you want automatic resizing according to width of slider (useful is you need a responsiveness). Set it in pixels it you want to have constant height. |
| transitionDuration | 500 | Duration of transition effect between slides (in msec.) |
| timingFunction | 'ease-out' | Easing function that will be used in transition effect (CSS easing function). |
| autoPlay | true | Enable automatic transition between slides. |
| autoPlayTimeout | 3000 | Delay (msec.) between slide transition when autoPlay is true. |
| prevNextButtons | true | Show next and previous slide buttons. |
| bullets | true | Show bullets that indicate which slide is active and used to quick switching between slides. |
| swipe | true | Enable swipe function to switch between slides. |
Style
The interface can be customized by overriding attributes of CSS classes. SCSS file included.
| Class | Description |
|---|---|
| .swipslider | Block that contains slider itself. |
| .sw-slides | Block that contains slides. |
| .sw-slide | Slide block, can contain either block with content or img element. |
| .sw-slide > img | Image of slide. |
| .sw-content | Block that can be used instead of img element and can contain other HTML elements. It can be used as a slide with content. |
| .sw-next-prev | Overall style of previous and next button. |
| .sw-prev | Style for previous button (to override the content use ::after pseudo element). |
| .sw-next | Style for next button (to override the content use ::after pseudo element). |
| .sw-bullet | Bullets container. |
| .sw-bullet li | Single bullet |
| .sw-bullet li.active | Active bullet |
Dependencies
- jQuery;
License
The MIT public license.
