JavaScript
Need help with scooch?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
mobify

Description

A mobile-first JavaScript-driven content and image carousel

126 Stars 22 Forks Other 116 Commits 6 Opened issues

Services available

Need anything else?

Scooch

A mobile-first content and image carousel.

NPM Code Climate Bower version

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

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











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

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:

| Option | Behaviour | |-----------------|---------------------------------------------------------------------| | dragRadius | The size of the 'deadspace' when dragging before Scooch begins following cursor/finger | | moveRadius | The size of the 'deadspace' that must be exceeded before Scooch will move between items | | animate | Whether or not Scooch should animate the move between items | | autoHideArrows | Whether or not Scooch should apply the inactive class to its previous and next controls (indicated by

[data-m-slide=prev]
and
[data-m-slide=next]
) when at its "bounds" | | rightToLeft | Whether or not Scooch should treat "next" as left and "previous" as right | | infinite | Whether or not Scooch should loop on itself | | autoplay: {interval: Number, cancelOnInteraction: Boolean} | Autoplay through the Scooch, advancing items every
interval
milliseconds.
cancelOnInteraction
sets whether or not the autoplay terminates once a user interacts with it. Autoplaying Scooches will always appear to loop as if they are infinite until user interaction, at which point they resume the behaviour specified by their options | | classPrefix | What all Scooch's classes will be prefixed by | | classNames | What Scooch should reference as its class names |

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

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

Building a distribution

Requirements

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.