Touch-enabled Horizontal Scroller with jQuery - Horizon Swiper

Horizon Swiper is a lightweight yet fully configurable jQuery content slider / scroller plugin which allows you to scroll horizontally through a group of html elements with native browser scrolling, mouse drag and/or touch swipe.

Basic usage:

1. Load the core style sheet and a theme CSS in the head section of the document.

<link href="dist/horizon-swiper.min.css" rel="stylesheet">
<link href="dist/horizon-theme.min.css" rel="stylesheet">

2. Add a group of html content to the scroller.

<div class="horizon-swiper">
  <div class="horizon-item"></div>
  <div class="horizon-item"></div>
  <div class="horizon-item"></div>
</div>

3. Initialize the plugin with one JS call.

$('.horizon-swiper').horizonSwiper();

4. Available configuration options with default values.

// Selector for the swiper items.
item: '.horizon-item',

// Set 'auto' for the original item width or an integer for a numer of items. 
// For example, set 2 for a 50% item width.
showItems: 'auto',

// Show prev / next arrow navigation
arrows: true,

// text for prev arrow
arrowPrevText: '',

// text for next arrow
arrowNextText: '',

// animation speed
animateionSpeed: 500,

// enable mouse drag
mouseDrag: true,

// Methods and callbacks
onStart: function onStart() {},
onEnd: function onEnd() {},
onSlideStart: function onSlideStart() {},
onSlideEnd: function onSlideEnd() {},
onDragStart: function onDragStart() {},
onDragEnd: function onDragEnd() {}

About Author:

Author: Sebastian Sauer

Website: http://horizon-swiper.sebsauer.de/

---

This awesome jQuery plugin is developed by sebsauer90. For more Advanced Usages, please check the demo page or visit the official website.