Cycle through your content without writing a single line of Javascript. To keep things simple, transition effects are optional and have been limited to slide and cross-fade. In browsers that don't support CSS transitions, jQuery's animate is used.

Keyboard navigation is available when the element has focus. Simply use the left/right arrows keys.

Setup

Before getting started, make sure everything is setup properly. Below is a basic HTML template to use as an example for including the plugin into your projects.

<!DOCTYPE html>
<html>
<head>
    <title>Looper.js</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./path/to/looper.css">
</head>
<body>
    <!-- Your HTML goes here -->
    <script src="./path/to/jquery.js"></script>
    <script src="./path/to/looper.js"></script>
</body>
</html>

Attention! This is just an example and contains the minimum requirements for including Looper.js into your project. All ./path/to references need to be replaced with proper paths.

Via data attributes

To initialize a plugin instance, simply add data-looper="go" to your element. Be sure to add the looper class for proper styling.

<div data-looper="go" class="looper">
    ...
</div>

Via Javascript

$('.looper').looper();

Accessing instances

Plugin instances are stored in the looperjs key on each element's data store and can easily be accessed by using jQuery's data method.

var myLooper = $('.looper').data('looperjs');

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="3000".

Name Type Default Description
interval number 5000 The amount of time (in milliseconds) to display an item. To disable the auto-loop, set to false.
pause string hover

When to pause the auto-loop. Set to false to disable.

Value Pauses
hover when an item is hovered
prev when the prev() method is called
next when the next() method is called
to when the to() method is called
speed number 500 The amount of time (in milliseconds) that corresponds to the CSS transition speed specified in looper.css. This value is used to ensure transitions are completed and as the animation speed for browsers that don't support CSS transitions.

Methods

All methods can be executed with the data-looper attribute and require a data-target or href attribute whose value must correspond to the ID of a Looper.js element. See below for examples.

.looper(options)

Initializes an instance with an optional options object.

$('.looper').looper({
    interval: 3000
});
.looper('loop')

Starts/resumes the auto-loop.

Via data attribute

<div id="myLooper" class="looper">
    ...
</div>
<a data-looper="looper" href="#myLooper">Looper</a>
.looper('pause')

Pause the auto-loop.

Via data attribute

<a data-looper="pause" href="#myLooper">Pause</a>
.looper('next')

Show the next item.

Via data attribute

<a data-looper="next" href="#myLooper">Next</a>
.looper('prev')

Show the previous item.

Via data attribute

<a data-looper="prev" href="#myLooper">Previous</a>
.looper('to', position)

Show the item at the specified position.

Be aware! The position argument is one-based. A value of 1 corresponds to the first item. Negative, zero and out-of-range positions will be ignored.

Via data attribute

<a data-looper="to" data-args="3" href="#myLooper">Go to item 3</a>

The data-args attribute is used to pass arguments to a method.

Events

Name Description
init Fires after an instance has been initialized.
show

Fires before a new item is shown.

Property Description
relatedTarget The item element being shown.
relatedIndex The index of the item element being shown.

Use e.preventDefault() on this event to cancel the showing of an item.

shown

Fired after a new item has been shown.

Property Description
relatedTarget The item element that was shown.
relatedIndex The index of the item element shown.

Transitions

Items can be shown with a sliding and/or cross-fade effect. To apply a transition, simply add the proper CSS class. For a sliding transition, add slide. For a cross-fade effect, add xfade. The slide transition has 3 optional classes: right, up and down. Each optional class corresponds to the sliding direction.

Default slide from the right

<div class="looper slide">
    ...
</div>

Slide up

<div class="looper slide up">
    ...
</div>

Cross-fade

<div class="looper xfade">
    ...
</div>

Slide down with cross-fade

<div class="looper xfade slide down">
    ...
</div>

Images for these examples are provided by the amazing lorempixel service.

Basic

The following example will auto-loop through items at the specified duration without a transition.

HTML
<div data-looper="go" class="looper">
    <div class="looper-inner">
        <div class="item">
            <img src="http://lorempixel.com/320/240/sports" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/animals" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/food" alt="">
        </div>
    </div>
</div>
Result

Transitions

Slide

This example will auto-loop through items with a slide transition.

HTML
<div data-looper="go" class="looper slide">
    <div class="looper-inner">
        <div class="item">
            <img src="http://lorempixel.com/320/240/sports" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/animals" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/food" alt="">
        </div>
    </div>
</div>
Result

Slide up

HTML
<div data-looper="go" class="looper slide up">
    <div class="looper-inner">
        <div class="item">
            <img src="http://lorempixel.com/320/240/sports" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/animals" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/food" alt="">
        </div>
    </div>
</div>
Result

Cross-fade

HTML
<div data-looper="go" class="looper xfade">
    <div class="looper-inner">
        <div class="item">
            <img src="http://lorempixel.com/320/240/sports" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/animals" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/food" alt="">
        </div>
    </div>
</div>
Result

Slide down cross-fade

HTML
<div data-looper="go" class="looper xfade slide down">
    <div class="looper-inner">
        <div class="item">
            <img src="http://lorempixel.com/320/240/sports" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/animals" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/food" alt="">
        </div>
    </div>
</div>
Result

With controls

HTML
<div id="controlLooper" data-looper="go" class="looper slide">
    <div class="looper-inner">
        <div class="item">
            <img src="http://lorempixel.com/320/240/sports" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/animals" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/food" alt="">
        </div>
    </div>
    <nav>
        <a class="looper-control" data-looper="prev" href="#controlLooper">
            <i class="icon-chevron-left"></i>
        </a>
        <a class="looper-control right" data-looper="next" href="#controlLooper">
            <i class="icon-chevron-right"></i>
        </a>
    </nav>
</div>
Result

With controls and navigation

Click on the bullets to navigate to the corresponding item.

HTML
<div id="bulletLooper" data-looper="go" class="looper slide">
    <div class="looper-inner">
        <div class="item">
            <img src="http://lorempixel.com/320/240/sports" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/animals" alt="">
        </div>
        <div class="item">
            <img src="http://lorempixel.com/320/240/food" alt="">
        </div>
    </div>
    <nav>
        <a class="looper-control" data-looper="prev" href="#bulletLooper">
            <i class="icon-chevron-left"></i>
        </a>
        <a class="looper-control right" data-looper="next" href="#bulletLooper">
            <i class="icon-chevron-right"></i>
        </a>
        <ul class="looper-nav">
            <li><a href="#bulletLooper" data-looper="to" data-args="1">&bull;</a></li>
            <li><a href="#bulletLooper" data-looper="to" data-args="2">&bull;</a></li>
            <li><a href="#bulletLooper" data-looper="to" data-args="3">&bull;</a></li>
        </ul>
    </nav>
</div>
Javascript
<script>
    jQuery(function($){
        $('#bulletLooper').on('shown', function(e){
            $('.looper-nav > li', this)
                    .removeClass('active')
                    .eq(e.relatedIndex)
                        .addClass('active');
        });
    });
</script>
Result

Copyright © 2013 Ry Racherbaumer

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.

You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.