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.
Click the demo page
- 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;
Use following command:
npm i alexemashev-swipeslider
Use following command:
bower install swipeslider
or
bower install swipeslider --save
to save to your project as dependency.
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.
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. |
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 |
- jQuery;
The MIT public license.