touchSlider Examples

Make your website mobile friendly with MobilizeToday.com !

Gallery with Single Centered Item

Here is the typical example of using touchSlider plugin. There is one centered item and prev/next buttons below. In order to switch items you may use buttons or swipe on touch screens.

$('.gallery-1').touchSlider({
    mode: 'index',
    single: true,
    prevLink: 'a.prev',
    nextLink: 'a.next'

});
.gallery-5 .inner{
    width: 270px;
    margin: 0 auto;
}

Gallery with Content

touchSlider plugin can be used for switching any content.

$('.gallery-2').touchSlider({
    mode: 'index',
    single: true,
    prevLink: 'a.prev',
    nextLink: 'a.next'
});

Browsing Wide Objects

touchSlider plugin can be also used for browsing wide objects like tables. Very useful option having limited width on iPhone or Android phones where overflow:scroll isn't supported yet.

$('.gallery-3').touchSlider({
    center: true
});

Gallery with Focused Item

You may outline the currently selected item by adding CSS styles. You may control visibility of neighboring items by changing single parameter.

$('.gallery-4').touchSlider({
    mode: 'index',
    center: true,
    prevLink: 'a.prev',
    nextLink: 'a.next',
    onChange: function(prev, curr) {
        $('.gallery-4 div.item').removeClass('focus');
        $('.gallery-4 div.item').filter(function(i){
            return i == curr;
        }).addClass('focus');
    }
});

Adding Prev/Next Buttons

This example demonstrates how prev/next buttons can be added.

$('.gallery-5').touchSlider({
    mode: 'index',
    center: true,
    prevLink: 'a.prev',
    nextLink: 'a.next'
});
<div class="gallery gallery-5">
    <div class="holder">
        <div class="list">
            <div class="item">
            </div>
            <div class="item">
            </div>
            ...
        </div>
    </div>
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a>
</div>

Adding Items Counter

In this example you may see counter below the current item. Code snippets how it's done shown below.

$('.gallery-6').touchSlider({
    mode: 'index',
    center: true,
    prevLink: 'a.prev',
    nextLink: 'a.next',
    onChange: function(prev, curr) {
        $('.counter').html((curr+1)+'/'+ $('.gallery-6').get(0).getCount());
    },
    onStart: function(){
        $('.counter').html('1/' + $('.gallery-6').get(0).getCount());
    }
});
<div class="gallery gallery-6">
    <div class="holder">
        <div class="list">
            <div class="item">
            </div>
            <div class="item">
            </div>
            ...
        </div>
    </div>
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a>
    <span class="counter"></span>
</div>

Adding Items Switcher by Index

Optionally you may use your own control elements to switch between gallery items as well as to show the currently selected item.

$('.gallery-7').touchSlider({
    mode: 'index',
    center: true,
    prevLink: 'a.prev',
    nextLink: 'a.next',
    onChange: function(prev, curr) {
        $('.switcher a.switch-item').removeClass('active');
        $('.switcher a.switch-item').filter(function(i){
            return i == curr;
        }).addClass('active');
    },
    onStart: function() {
        $('.switcher').html('');
        for (var i = 0; i < $('.gallery-7').get(0).getCount(); i++) {
            var el = $('<a href="#" class="switch-item">'+(i+1)+'</a>');
            el.attr('index', i);
            $('.switcher').append(el);
            el.bind('click', function(){
                $('.gallery-7').get(0).moveTo($(this).attr('index'));
                return false;
            });
        }
    }
});
<div class="gallery gallery-7">
    <div class="holder">
        <div class="list">
            <div class="item">
            </div>
            <div class="item">
            </div>
            ...
        </div>
    </div>
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a>
    <span class="switcher"></span>
</div>

Using Automatic Mode

touchSlider plugin may automatically detect how many items can be shown per slide depending on the width available.

$('.gallery-8').touchSlider({
    mode: 'auto',
    center: true,
    single: true
});

Automatic Mode with Different Image Sizes

No need to keep the items of the same size. touchSlider may work with different items sizes.

$('.gallery-9').touchSlider({
    mode: 'auto',
    center: true,
    single: true
});

If you like this plugin and want it to be even better as well as to see new FREE mobile freebies from us, you are welcome to donate.