Sliders can be used in a lot of places in your website ... home pages, galleries, ... Here are the component you need from Stashy for creating this type of stuff.
The slider presented here may be touch enabled for improve user experience in mobile devices.
<div id="sl1" class="st-slider"> <ul class="st-slider-panes"> <li> Content here (images, paragraphs, etc...). Use optionally a box with .st-slider-content class in order to add a little padding You can optionally add a box with .st-slider-caption class. This is useful for showing info about the content. <div class="st-slider-caption"> <h4>My caption title</h4> <p>My caption description</p> </div> </li> </ul> </div>
Stashy.Slider(selector, options)
Parameter | Type | Description | |
---|---|---|---|
selector | string | CSS selector. Select the Slider container | |
options | object | See options | You can pass the options to the slider instance |
Option | Type | Default | Description |
---|---|---|---|
enableControls | bool | >true | Show the slider controls to permit slide panels left or right |
enableIndicators | bool | true | Show the panel you are in |
showOnHover | bool | false | Show all the slider enabled controls when hovering or tap |
autoSlide | bool | true | Auto slide using the duration option |
enableTouch | bool | false | If touch is enabled, then you can swipe and drag over the panels. The touch behaviour is controlled by Hammer.js so you need to add a reference to jquery.hammer.js. Get it in the project site or in the dist folder of the Stashy Github project |
duration | int | 5000 | The duration for the auto slide option (in milliseconds) |
Name | Description |
---|---|
on() | Initializes Slider with the options you choose |
showPane(index) | Show the panel you choose |
index:Choose panel to show (from 0 to N) |
|
next() | Show next panel |
prev() | Show previous panel |
sl2 = Stashy.Slider("#sl2",{showControls : false, showIndicators:false, enableTouch : true}).on();
The classic carousel for showing your images. In this sample all the options are enabled so you have controls showed on hover or tap, touch enabled for drag left and right ...etc.
Several information panels with auto slide options enabled and touch. You can drag left or right to change the panels. No controls available. Slide panels in the following widget :)
Little widget with controls and auto slide disabled. For revealing options you can drag left the widget.
less
For using just this component, create a .less file similar to Stashy.less, include in order the following imports and compile:
Stashy.Variables.less Stashy.Mixins.less Stashy.Slider.lessJS
jQuery.js jquery.hammer.js (if touch enabled) Stashy.Utils.js Stashy.Events.js Stashy.Modernizr.js Stashy.Slider.js