swiper 0.0.3

  • Readme
  • Changelog
  • Installing
  • 14

Swiper #

A touch (and mouse) slider for swiping through images and HTML.

Star this Repo Pub Package Build Status

GitHub | Pub | Demos and Examples

Browser Support #

Swiper supports all browsers supported by Dart 1.6 and later:

  • Internet Explorer, versions 10, and 11.
  • Firefox, latest version.
  • Chrome, latest version.
  • Safari for desktop, version 6.
  • Safari for mobile, version 6.

Features #

  • Touch and Mouse. Slide either on a touch screen or with the mouse.
  • Smooth Transitions. Swiper uses Hardware-accelerated CSS3 transitions for smooth animations.
  • Auto Resizing. When the browser window is resized or a mobile device is rotated, the swiper and all its pages are resized automatically.
  • Scroll Prevention. Swiper detects if the user tries to slide or tries to scroll vertically.
  • Images or HTML. Swiper supports any HTML content for swipe pages.

Demos #

All Demos can also be found in the example folder.

Usage #

1. HTML #

Swiper needs a simple HTML structure. Here is an example:

<div class="swiper">
  <div class="page-container">
  • The swiper is the main container. This will become the viewport.
  • The page-container is the container that wraps all pages.
  • The inner divs are the slide pages and can contain any HTML content.

2. Initialize the Swiper #

In the Dart code you initialize the Swiper with a single line. The main container needs to be passed to the Swiper constructor.

Swiper swiper = new Swiper(querySelector('.swiper'));

3. CSS #

A few styles are needed:

.swiper {
  overflow: hidden;
  position: relative;
  height: 333px; /* Declare the height of the swiper. */
  visibility: hidden; /* Hide until layout is ready. */

.page-container {
  position: relative;
  height: 100%;

.page-container > div {
  position: absolute;
  width: 100%;

Constructor Options #

  • startIndex: the index position the Swiper should start at - default: 0
  • speed: the speed of prev and next transitions in milliseconds - default: 300
  • autoWidth: defines if the Swiper should automatically adjust the width when the browser is resized. You might want to disable this if you want to manually do some width and height calculations. If disabled, make sure you call the resize method after the size of the Swiper changed - default: true
  • autoHeightRatio defines if and how the Swiper should calculate the height. If defined, the height is calculated from the Swiper's width with autoHeightRatio and automatically applied when the browser is resized. This is useful, e.g. for responsive images - default: null
  • distanceThreshold: If swipe distance is more than the distanceTreshold (in px), a swipe is detected (regardless of swipe duration) - default: 20
  • durationThreshold: If swipe duration is less than the durationTreshold (in ms), a swipe is detected (regardless of swipe distance) - default: 250
  • handle: If handle query String is specified, it restricts the dragging from starting unless it occurs on the specified element(s). Only elements that descend from the swiperElement are permitted - default: null
  • cancel: If cancel query String is specified, drag starting is prevented on specified elements - default: input, textarea, button, select, option
  • draggingClass: Is the CSS class set to the swiperElement while a user is dragging. If set to null, no such CSS class is added - default: swiper-dragging
  • draggingClassBody: Is the CSS class set to the html body tag while a user is dragging. If set to null, no such CSS class is added - default: swiper-drag-occurring


Swiper swiper = new Swiper(querySelector('.swiper'), 
    startIndex: 2,
    speed: 600,
    autoWidth: true,
    autoHeightRatio: 0.66);

Methods #

  • currentIndex: The current page index.
  • currentPage: The HTML element of the current page.
  • moveToIndex(int index, {int speed, bool noEvents: false}: Moves to the page at the specified index. Optionally, the speed of the transition can be specified. If no events (pageChange and pageTransitionEnd) should be fired, the noEvents flag can be set to true.
  • next({int speed}): Moves to the next page.
  • prev({int speed}): Moves to the previous page.
  • hasNext(): Returns true if there is a next page.
  • hasPrev(): Returns true if there is a previous page.
  • resize(): Updates the cached page width and the container sizes. The resize method is automatically called when the browser is resized. But if the Swiper is resized other than through browser resizing, the resize method must be called manually.
  • destroy(): Unistalls all listeners. This will return the swiper element back to its pre-init state.


// Set up method calls for button clicks.
ButtonElement prevButton = querySelector('#previous-button')
    ..onClick.listen((_) => swiper.prev());
ButtonElement nextButton = querySelector('#next-button')
    ..onClick.listen((_) => swiper.next());

Events #

  • onPageChange: Fired when the current page changed. The data of the event is the page index.
  • onPageTransitionEnd: Fired when the transition ends after a page change. Note: If the user swipes again before the previous transition ended, this event is only fired once, at the end of all page transitions. The data of the event is the page index.
  • onDragStart: Fired when the user starts dragging.
  • onDrag: Fired periodically throughout the drag operation.
  • onDragEnd: Fired when the user ends the dragging.


swiper.onPageChange.listen((index) {
  print('PageChange Event: index=${index}');

Attribution #

Swiper is heavily inspiried by flipsnap.js, swipe.js, and SwipeView.

Many thanks to the authors for those great JavaScript projects!

License #

The MIT License (MIT)

Changelog #

Version 0.0.3 (2015-03-09) #

  • Update dnd dependency to v0.2.1.
  • Simplify deployment script.
  • Update readme with badges.

Version 0.0.2 (2014-07-22) #

  • Use dnd library for drag detection.

Version 0.0.1 (2014-02-10) #

  • Initial Version.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  swiper: ^0.0.3

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:swiper/swiper.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Analysis issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://dart.dev/dart-2#migration.