Mobile Friendly Responsive Slider jQuery Plugin – jCider

Category: jQuery | Sub-Category: Sliders and Carousels

Description

responsive slider jquery

Responsive Slider jQuery Plugin for sliding the content on your page.

Dependencies

CSS

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.jcider/1.1.2/jcider.css"/>

jQuery

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.jcider/1.1.2/jcider.min.js"></script>

Usage

Create a HTML matkup:

<div class="slider">
    <ul>
        <li>First Slide</li>
        <li>Second Slide</li>
        <li>Third Slide</li>
    </ul>
</div>

Do not set width or height to the slides, they will be automatically adjusted by taking the parent container width and height.

Then call the plugin

$(document).ready(function(){
    // Make sure to call jcider on the wrapper element
    $('.slider').jcider();
});

You could pass some options:

$('yourWrapperElementHere').jcider({
    fading: false,
    easing: 'linear',
    controls: true,
    pagination: true,
    transitionDuration: 400,
    autoplay: false,
    slideDuration: 3000
});

Options

fading 	
// Boolean. Changes the transition between slides. true sets the fading transition and false is 
// forsliding. Default value: false
easing 	
// String. Sets the easing animations. Parameters: 'linear' or 'swing'. They can be increased in 
// combination with the jQuery easing plugin. Default value: 'linear'
controls 
// Boolean. Show/Hide navigation controls. False will hide them, and true means visible. 
// Default value: true
pagination
// Boolean. Show/Hide pagination.true is visible. False will hide them, and true means visible. 
// Default value: true
transitionDuration 	
// Integer. Transition duration between slides, in milliseconds.
// Default value: 400
autoplay 	
// Boolean. Turn on/off automatic transition, autoplay, between slides. 
// Default value: false
slideDuration 	
// Integer. The duration of slides transition, in milliseconds. Applied only if autoplay is on.
// Default value: 3000

Multiple Sliders

You can add multiple sliders on the same page, just make sure to call .jcider() each time.
Example:

<header>
    <div class="slider">
        <ul>
            <li>First Slide.</li>
            <li>Second Slide.</li>
            <li>Third Slide.</li>
        </ul>
    </div>
</header>
<div class="slider-2">
    <ul>
        <li>First Slide.</li>
        <li>Second Slide.</li>
        <li>Third Slide.</li>
    </ul>
</div>
<div class="slider-3">
    <ul>
        <li>First Slide.</li>
        <li>Second Slide.</li>
        <li>Third Slide.</li>
    </ul>
</div>

jQuery:

$('.slider').jcider();
$('.slider-2').jcider();
$('.slider-3').jcider();