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.
Installation
Install Scooch 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.