Slider

Create sliding touch enabled layout and carousels

  Download   View project on Github

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>

Constructor

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

Options

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)

Methods

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

Sample

sl2 = Stashy.Slider("#sl2",{showControls : false, showIndicators:false, enableTouch : true}).on();

Carousel

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.

  • Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius lacus nunc. Suspendisse sit amet aliquet mi. Aliquam blandit cursus elit, ac dictum erat condimentum vel. In elementum consectetur nisl, sit amet vestibulum lectus tempor vel. Integer tempus, erat non ullamcorper suscipit

  • Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius lacus nunc. Suspendisse sit amet aliquet mi. Aliquam blandit cursus elit, ac dictum erat condimentum vel. In elementum consectetur nisl, sit amet vestibulum lectus tempor vel. Integer tempus, erat non ullamcorper suscipit

  • Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius lacus nunc. Suspendisse sit amet aliquet mi. Aliquam blandit cursus elit, ac dictum erat condimentum vel. In elementum consectetur nisl, sit amet vestibulum lectus tempor vel. Integer tempus, erat non ullamcorper suscipit

  • Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus varius lacus nunc. Suspendisse sit amet aliquet mi. Aliquam blandit cursus elit, ac dictum erat condimentum vel. In elementum consectetur nisl, sit amet vestibulum lectus tempor vel. Integer tempus, erat non ullamcorper suscipit

Information panel

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 :)

  • ... Drag or swipe ...

    add Hammer.js, enable touch and use gestures for drag or swipe panels

  • ... Full screen ...

    This widget can be useful for a full screen sliding carousel in mobile devices

    For doing this, for example, you can add the slider like your main layout, add body height and min-height to 100% and disable viewport scaling

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

  • Height is important!!

    Add images with the same size

    When using text, is important to set the height of your slider in the main container (.st-slider)

    For example, this widget is set to 25em

  • Hey!!

    Of course, you are not limited by these designs, your imagination is the limit.

Revealing options widget

Little widget with controls and auto slide disabled. For revealing options you can drag left the widget.

  • Drag left

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.less

JS

jQuery.js jquery.hammer.js (if touch enabled) Stashy.Utils.js Stashy.Events.js Stashy.Modernizr.js Stashy.Slider.js