A touch (and mouse) slider for swiping through images and HTML.
GitHub | Pub | Demos and Examples
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.
- 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.
- Simple Example
- Responsive Images Example
- Method and Events Example
- HTML Content Example
- Fullscreen Example
All Demos can also be found in the example
folder.
Swiper needs a simple HTML structure. Here is an example:
<div class="swiper">
<div class="page-container">
<div></div>
<div></div>
<div></div>
</div>
</div>
- The
swiper
is the main container. This will become the viewport. - The
page-container
is the container that wraps all pages. - The inner
div
s are the slide pages and can contain any HTML content.
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'));
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%;
}
startIndex
: the index position the Swiper should start at - default: 0speed
: the speed of prev and next transitions in milliseconds - default: 300autoWidth
: 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 theresize
method after the size of the Swiper changed - default: trueautoHeightRatio
defines if and how the Swiper should calculate the height. If defined, the height is calculated from the Swiper's width withautoHeightRatio
and automatically applied when the browser is resized. This is useful, e.g. for responsive images - default: nulldistanceThreshold
: If swipe distance is more than thedistanceTreshold
(in px), a swipe is detected (regardless of swipe duration) - default: 20durationThreshold
: If swipe duration is less than thedurationTreshold
(in ms), a swipe is detected (regardless of swipe distance) - default: 250handle
: 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 theswiperElement
are permitted - default: nullcancel
: If cancel query String is specified, drag starting is prevented on specified elements - default: input, textarea, button, select, optiondraggingClass
: Is the CSS class set to theswiperElement
while a user is dragging. If set tonull
, no such CSS class is added - default: swiper-draggingdraggingClassBody
: Is the CSS class set to the htmlbody
tag while a user is dragging. If set tonull
, 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);
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());
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}');
});
Swiper is heavily inspiried by flipsnap.js, swipe.js, and SwipeView.
Many thanks to the authors for those great JavaScript projects!
The MIT License (MIT)