Responsive slider

by w3widgets

Features

Fully responsive

CSS markup that was created for our slider takes care of handling display on all possible devices

One to one swipe movement

Unlike most sliders, it supports one to one swipe movement representation on changed slides

Twitter bootstrap integration

You can use responsive slider independently but it shows full potencial when coupled with bootstrap

Animated captions

Each slide content can be animated. Moreover, You can write your own custom animations if necessary

HTML5 and CSS3 supported

We are putting all the effort to support newest standards while keeping backwards compatibility

Under constant development

Responsive slider in under constant development so you can return from time to time for new features

Pricing

By downloading the software you are accepting the license.

Free

Non commercial use

If you want to use the software on a webpage that's not related to any business (online store, service provider etc.) you can do it without charge.

10$

Commercial

Single application

Your use of the item is restricted to a single installation

50$

Commercial

Multiple applications

Your use of the item may extend to multiple installations

500$

Commercial

Extended

You may license, sublicense, redistribute, or resell the item in some circumstances.

Installation

You gonna need to put some stuff to your <head> tag:

<script src="js/jquery.js"></script>
<script src="js/jquery.event.move.js"></script>
<script src="js/responsive-slider.js"></script>

<link href="css/responsive-slider.css" rel="stylesheet" media="screen">

Responsive Slider requires jQuery (v1.9.1+) and jQuery.event.move plugin. You will get all necessary files in the Responsive Slider archive thet you can download from this page.

Build your slider markup:

<!-- RESPONSIVE SLIDER - START -->
<div class="responsive-slider" data-spy="responsive-slider" data-autoplay="true" data-interval="5000" data-transitiontime="300">
  <div class="slides" data-group="slides">
    <ul>
      <li>
        <div class="slide-body" data-group="slide">
          <img src="img/slide-1.jpg">
          <div class="caption" data-animate="slideAppearRightToLeft" data-delay="500" data-length="300">
            <h2><i class="icon-gift"></i> Responsive slider</h2>
            <div class="caption" data-animate="slideAppearLeftToRight" data-delay="800" data-length="300">With one to one swipe movement!</div>
          </div>
        </div>
      </li>
      . . .
    </ul>
  </div>
  <a class="slider-control left" href="#" data-jump="prev"><i class="icon-angle-left"></i></a>
  <a class="slider-control right" href="#" data-jump="next"><i class="icon-angle-right"></i></a>
  <div class="pages">
    <a class="page" href="#" data-jump-to="1">1</a>
    <a class="page" href="#" data-jump-to="2">2</a>
    <a class="page" href="#" data-jump-to="3">3</a>
  </div>
</div>
<!-- RESPONSIVE SLIDER - END -->

The slider have entire markup exposed to you so you can easily edit it by for example adding your own classes. Note that you don't need any of the classes that you can see in the example however [data-group] properties are obligatory. You can initialize the plugin and set options directly from markup using data interface. For example, you can set captions animation properties by setting data-animate, data-delay or data-length. By data-jump attribute you can set prev/next buttons and by using data-jump-to pages indicators can by easily setup. In this example we initialized the plugin by using data-spy="responsive-slider".

You can also initialize the plugin using JavaScript. This way you can also setup callback functions.

<script>
$( document ).ready( function() {
  $('.responsive-slider').responsiveSlider();
});
</script>

Options

There are some options that can be setup both thru data interface and javascript on plugin initialization. Options that are avaliable on init are more general ones while data interface handles component specific ones.

Javascript

You can specify options thru javascript on plugin init:

<script>
$( document ).ready( function() {
  $('.responsive-slider').responsiveSlider({
    autoplay: true,
    interval: 5000,
    transitionTime: 300
  });
});
</script>

Options overview:

Option Dafault Description
autoplay /bool/ false Autoplay flag, if set to true the slider will change slides every few seconds
interval /int/ 5000 Interval between slides change in miliseconds
transitionTime /int/ 300 Slide change transition time in miliseconds
touch /bool/ true When set to false disables touch/swipe slide change
parallax /bool/ false When set to true script will move background of [data-group="slides"] element
parallaxDistance /float/ (1/10) Distance for the background to move compared to slide move distance
parallaxDirection /int/ 1 1 or -1 to switch default direction
moveDistanceToSlideChange /int/ 4 Fraction of the slidar width you have to move you finger to change slide. Default 4 means that you have to swipe through 1/4 of the slide width.

Data API

Option Value Object Description
animate /string/ empty caption Name of a function to use to animate
delay /int/ 0 caption Delay of the animation start
length /int/ 300 caption Animation length
jump /string/ (prev|next) prev-next control Prev/next controls definition
jump-to /int/ (1..n) pages control Pages controls definition
autoplay /bool/ false Slider Autoplay flag, if set to true the slider will change slides every few seconds
interval /int/ 5000 Slider Interval between slides change in miliseconds
transitiontime /int/ 300 Slider Slide change transition time in miliseconds
parallax /bool/ false Slider When set to true script will move background of [data-group="slides"] element
parallax-distance /float/ (1/10) Slider Distance for the background to move compared to slide move distance
parallax-direction /float/ 1 Slider 1 or -1 to switch default direction

Methods

Responsive slider exposes 3 methods: prev, next and jump:

Name Example Description
prev
$('#slider').responsiveSlider('prev')
Changes slide to previous one
next
$('#slider').responsiveSlider('prev')
Changes slide to next one
jump
$('#slider').responsiveSlider(3)
Jumps directly to selected slide
start
$('#slider').responsiveSlider('start')
Starts autoplay
stop
$('#slider').responsiveSlider('start')
Stops autoplay

Callbacks

There are 4 callback functions avaliable in Responsive Slider:

Name Description
onSlideChange Run after slide was changed
onSlideNext Run before slide changes to next
onSlidePrev Run before slide changes to previous
onSlidePageChange Run before slide changes

Callbacks can be set on slider javascript init:

<script>
$( document ).ready( function() {
  $('.responsive-slider').responsiveSlider({
    onSlideChange: function() { console.log(this) }
  });
});
</script>
What is important here that thru this you can access slider object that gives you access to every internal function and variable. For example:
<script>
$( document ).ready( function() {
  $('.responsive-slider').responsiveSlider({
    onSlideChange: function() {
      alert(this.slide);
    }
  });
});
</script>
Will display current slide number.

Animations

Responsive Slider provides few basic animation functions:

  • slideAppearRightToLeft
  • slideAppearLeftToRight
  • slideAppearUpToDown
  • slideAppearDownToUp

Here is the example of animation function:

slideAppearLeftToRight: function($caption, delay, length) {
  var animate, css;
  if (delay == null) {
    delay = 0;
  }
  if (length == null) {
    length = 300;
  }
  css = {
    'margin-left': -100,
    'margin-right': 100
  };
  $caption.css(css);
  animate = function() {
    css = {
      'margin-left': 0,
      'margin-right': 0,
      'opacity': 1
    };
    return $caption.animate(css, length);
  };
  if (delay > 0) {
    return setTimeout(animate, delay);
  } else {
    return animate();
  }
}

Standard animation functions assume that the caption element will be positioned absolutely and they do move animations by changing margins.

You can add your own animations by adding (or editing) animations functions to $.fn.responsiveSlider.animations object.

F.A.Q.

No topics here yet

Changelog

Report an issue

v0.9 Important!

17.03.2014
  • ! Resolved long lasting issue with slider area wouldn't allow to scroll the page.
  • Added stop and start autoplay methods.
  • Inside callback function this represents slider object that gives access to every internal function and variable. Probably should work that way from the beginning.

v0.8

16.01.2014
  • Changed slider animation base from „scroll left” to „relative right”.
  • Some Twitter Bootstrap 3 compatibility changes.

v0.7.2

08.10.2013
  • Fixed bug in paralax example.

v0.7.1

08.09.2013
  • Fixed bug that caused slider not to stop auto-slide after swipe.

v0.7

07.09.2013
  • Added parallax slider mode.
  • Added options: parallax, parallaxDistance, parallaxDirection options.
  • Few minor improvements and some code refactoring.

v0.6

24.04.2013
  • Fixed bug that caused slider to stop between slides.
  • Added moveDistanceToSlideChange option.

v0.5

17.04.2013
  • Fixed bug that caused captions to animate when clicked on the current page indicator.

v0.4

12.04.2013
  • Fixed bug that caused, in some cases, wrong slide to show on script initialization.
  • Autoplay now permanently stops on swipe event.
  • Removed touch surface element as redundant.
  • Added touch option allowing to disable all touch/swipe slider functionality.

v0.3

08.04.2013
  • Fixed issues with slide change smoothness on some devices.

v0.2

07.04.2013
  • Fixed bug where animations where stacked up and run in an unpredictable manner.
  • Fixed bug that caused animations to run when slide was returning to it's normal position.

v0.1

01.04.2013
  • Responsive Slider/Carousel release.