A mobile-first content and image carousel.
<!-- 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>
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). |
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"
}
});
Moves the carousel one item to the right.
$('.m-scooch').scooch('next');
Moves the carousel one item to the left.
$('.m-scooch').scooch('prev');
Moves the carousel to a index x
(1-based).
$('.m-scooch').scooch('move', 1);
Removes event handlers bound on the carousel.
$('.m-scooch').scooch('unbind');
Binds the event handlers on the carousel.
$('.m-scooch').scooch('bind');
Re-initialize carousel after new slides were added or removed
$('.m-scooch').scooch('refresh');
Removes the carousel and its event handlers from the DOM.
$('.m-scooch').scooch('destroy');
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. |
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 |
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 |
npm install -g grunt-cli
npm install
grunt
The build directory will be populated with minified versions of the css and javascript files and a .zip of the original source files (for distribution and use with whatever build system you might use).