jCider

jCider

An extensive and responsive jQuery carousel plugin for making awesome customizable sliders.

Demo

1

2

3

4

5

6

Getting started

For more information- GitHub

HTML
CSS
JS
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My awesome site.</title>
        <!-- Link jQuery, jcider.css and jcider.min.js -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.jcider/latest/jcider.css">
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jquery.jcider/latest/jcider.min.js"></script>
    </head>
    <body>
        <!-- 3 Layer structure -->
        <section class="slider">
            <div>
                <div> Slide Content </div>
                <div> Slide Content </div>
                <div> Slide Content </div>
            </div>
        </section>
    </body>
</html>
/* Give them some dimensions! */

.slider {
    width: 400px;
    height: 225px;
}

.slider > div > div {
    width: 100%;
    height: 100%;
    background: orange
}
// Call the function on your wrapper element

$(document).ready(function() {
    $('.slider').jcider({
        // Your settings here
    });
});