Scooch

A mobile-first content and image carousel.

Demo

You can find a simple demo on the Documentation page. More demos can be found inside the examples folder in the repo. Run grunt examples to see them in Chrome (mobile device emulation is recommended).

Requirements

• jQuery

Zepto Support

Scooch supports Zepto up until v0.6.1 but is not actively developed for it. You should be able to use Scooch directly with Zepto. While we don't actively support Zepto for Scooch, we welcome any and all issues and PRs to help us make it work.

Installation

Scooch can be installed using NPM:

npm install scooch

Usage

<!-- 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 jquery.js -->
<script src="jquery.js"></script>
<!-- include scooch.js -->
<script src="scooch.js"></script>
<!-- construct the carousel -->
<script>$('.m-scooch').scooch()</script>

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:

Methods

.scooch(options)

Constructs the carousel with specific options. Defaults are shown here.

$('.m-scooch').scooch({
      dragRadius: 10,
      moveRadius: 20,
      animate: true,
      autoHideArrows: false,
      rightToLeft: false,
      infinite: false,
      autoplay: false,
      classPrefix: "m-",
      classNames: {
        outer: "scooch",
        inner: "scooch-inner",
        item: "item",
        center: "center",
        touch: "has-touch",
        dragging: "dragging",
        active: "active",
        inactive: "inactive",
        fluid: "fluid"
    }
});

Options

The options object passed to Scooch during construction can configure its behaviour in the following ways:

.scooch('next')

Moves the carousel one item to the right (or left if rightToLeft option is enabled).

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

.scooch('prev')

Moves the carousel one item to the left (or right if rightToLeft option is enabled).

$('.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('refresh')

Re-initialize carousel after new slides were added or removed

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

.scooch('destroy')

Removes the carousel and its event handlers from the DOM.

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

Events

The viewport emits the following events:

Browser Compatibility

Mobile Browsers

The following mobile browsers are fully supported:

The following mobile browsers have degraded support:

Desktop Browsers

The follow desktop browsers are fully supported:

The following desktop browsers have degraded support:

Building a distribution

Requirements

• Node.js v4.x LTS + NPM v2.x (Mobify recommends NVM for installing Node + NPM)
• Grunt
  • Install with npm install -g grunt-cli

Steps

1. npm install
2. grunt build

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).

License

MIT License. Scooch is Copyright © 2016 Mobify. It is free software and may be redistributed under the terms specified in the LICENSE file.