Download View on Github Examples

Scooch is a touch based sliding carousel for images and other content.

Bulleted indicators for number of items and currently-selected item. Click to advance between items.

1 2 3

Installation

Bellows can be installed using bower:

bower install scooch

CSS

<link rel="stylesheet" href="/bower_components/scooch/build/scooch.min.css">

JavaScript

<script src="/bower_components/scooch/build/scooch.min.js"></script>

Base HTML

<!-- include scooch.css -->
<link rel="stylesheet" href="scooch.css">
<link rel="stylesheet" href="scooch-style.css">

<!-- the viewport -->
<div class="m-scooch m-fluid m-scooch-photos">
  <!-- the slider -->
  <div class="m-scooch-inner">
    <!-- the items -->
    <div class="m-item m-active">
      <img src="image1.jpg">
    </div>
    <div class="m-item">
      <img src="image2.jpg">
    </div>
    <div class="m-item">
      <img src="image3.jpg">
    </div>
  </div>
  <!-- the controls -->
  <div class="m-scooch-controls m-scooch-bulleted">
    <a href="#" data-m-slide="prev">Previous</a>
    <a href="#" data-m-slide="1" class="m-active">1</a>
    <a href="#" data-m-slide="2">2</a>
    <a href="#" data-m-slide="3">3</a>
    <a href="#" data-m-slide="next">Next</a>
  </div>
</div>

<!-- include zepto.js or jquery.js -->
<script src="zepto.js"></script>
<!-- include scooch.js -->
<script src="scooch.js"></script>
<!-- construct the carousel -->
<script>$('.m-scooch').scooch()</script>

Methods

.scooch(options)

Constructs the carousel with options.

$('.m-scooch').scooch({
      dragRadius: 10
    , moveRadius: 20
    , classPrefix: undefined
    , classNames: {
        outer: "carousel"
      , inner: "carousel-inner"
      , item: "item"
      , center: "center"
      , touch: "has-touch"
      , dragging: "dragging"
      , active: "active"
    }
});

.scooch(‘next’)

Moves the carousel one item to the right.

$('.m-scooch').scooch('next');

.scooch(‘prev’)

Moves the carousel one item to the left.

$('.m-scooch').scooch('prev');

.scooch(‘move’, x)

Moves the carousel to a index x (1-based).

$('.m-scooch').scooch('move', 1);

.scooch(‘unbind’)

Removes event handlers bound on the carousel.

$('.m-scooch').scooch('unbind');

.scooch(‘bind’)

Binds the event handlers on the carousel.

$('.m-scooch').scooch('bind');

.scooch(‘destroy’)

Removes the carousel and its event handlers from the DOM.

$('.m-scooch').scooch('destroy');

Classes

By default, items are center aligned and their width is determined by their content width and/or any styling that restricts their width.

To change the styling of the items, add the following classes to the viewport:

Class Description
.m-fluid Causes the width of items to resize to match the viewport width.
.m-center Causes the items to be center aligned, not left aligned (the default).

Events

The viewport emits the following events:

Name Arguments Description
beforeSlide previousIndex, newIndex Fired before the carousel moves.
afterSlide previousIndex, newIndex Fired after the carousel begins moving.

Browser Compatibility

Mobile Browsers

The following mobile browsers are fully supported:

Browser Version
Mobile Safari 3.1.3+
Android Browser 2.1+
Android Chrome 1.0+
Android Firefox 1.0+

The following mobile browsers have degraded support:

Browser Version
Windows Phone 7.5

Desktop Browsers

The follow desktop browsers are fully supported:

Browser Version
Safari 4.0+
Firefox 4.0+
Chrome 12.0+
Opera 12.0+
Internet Explorer 10.0+

The following desktop browsers have degraded support:

Browser Version
Internet Explorer 8.0,9.0
Firefox 3.5,3.6

Contributing

Please see the project’s GitHub page for details on contributing.

License

Licensed under the MIT License.