Tutorial: Create a Responsive Slider with Sequence.js + Live Demo

Tutorial: Create a Responsive Slider with Sequence.js + Live Demo
in Tutorials 2 comments
Advertisements

Over the last few years, jQuery has become a new standard for how we present content and images in an eye catching and organized manner on the web. Because of being easily customizable, light-weight and having unlimited possibilities, believe it or not, it’s being used by 60.5% of all websites in present.

One of the biggest challenges that web developers often face is presenting lots of information in a very limited space. That’s where jQuery slider plug-ins show their true magic. Although, there are dozens of content slider plug-ins available around the web, but only few of them work responsively and support CSS3 transitions and gestures controls. Luckily, Sequence.js is one of them. In this tutorial, firstly I’ll take a closer look at main features of Sequence.js and after that I’ll demonstrate how you can make your own responsive slider with Sequence.js.

Let’s start!

Key Features of Sequence.js

Open Source:

Open source

The first and best thing about Sequence.js is to be an open source project. This means you’re allowed to modify, distribute and sell the Sequence.js code for private and commercial projects. Also, Sequence.js has a community for users where you can contribute and collaborate to improve Sequence as much as possible. If you have found a bug or have an idea to make Sequence better, you can follow the Sequence.js project on GitHub.

CSS3 Transitions:

CSS3 Transitions

What make Sequence.js different from other jQuery slider plug-ins are its infinite style possibilities. Unlike other sliders that force you to use in-built styles, Sequence.js gives you complete creative control to build a unique, never-seen-before slider using pure CSS3. Using the latest web technologies, you can add multiple types of transitions, styles and effects to your slides. Shrink, fade, rotate, grow, skew, parallax effect, 3D transform, you name it.

Fully Responsive:

Fully Responsive

Instead of JavaScript animations, Sequence.js makes use of CSS3 transitions in order to deliver performance-efficient and smoother animations. Best of all, you can take advantage of CSS3 media queries to make your slider responsive. That means your slider will look great on all types of mobile, tablet and desktop devices. With Sequence.js, the possibilities of what you can create are unlimited.

Cross-Browser Compatible:

Cross Browser

Sequence.js works great in all major mobile, tablet and desktop browsers including Firefox, Chrome, Safari, IE 10+ and Opera 12+. In addition, it also works perfectly well in older browsers that don’t support CSS3 transitions. In that case, it gracefully fallbacks to a simple right-to-left content slider that lays out your content exactly as in modern browsers with little less fancy transitions.

Supports Touch Devices:

Touch Support

Apart from being fully responsive and cross-browser compatible, Sequence.js also supports swipe and touch events. Users can navigate between slides by simply swiping their finger over the slider. You can choose the way in which navigation should relate to the direction of swiping and if you want, you can completely disable swipe and touch functionality.

Over 40 Options:

40+ Options

Sequence.js doesn’t only have an infinite amount of unique and advanced transition styles, but also has 40+ options to let you have complete or partial control over the each element of the slider. Some of the options that you can use to control finer details are hash tags, auto play, callbacks, custom key events, touch swiping, and preloading. What’s more, each and every option is comprehensively documented for ease of use.

Pre-built Themes:

Pre-Build Themes

Sequence.js ships with several free and premium pre-built themes to give you a quick start. As all themes are built using CSS3 and HTML, you can directly integrate them with your website or customize them to appear and function the way you like. Once you get your hands on Sequence.js, you can create your own slider with a little HTML and CSS3 knowledge.

Creating a Responsive Slider with Sequence.js

Building a responsive slider using Sequence is as easy as you design a web page. All you need is to have basic knowledge of HTML and CSS3. Just follow steps given below and you’re good to go.

Step 1: Include Files

In order to create a slider with Sequence.js, the first and foremost thing you need to do is referencing jQuery and the sequence.js file in the head section of your HTML document. You can download the latest version of Sequence.js from here.

<head>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js“></script>

<script type=”text/javascript” src=”scripts/sequence.js“></script>

</head>

In addition, you can place links to your favorite Google Fonts as I have done in my demo, or can download other popular fonts and use them. If you don’t do that, the browser will fall back on default fonts.

Step 2: Initiate Sequence

Once you’ve added all essential files in the <head> of your HTML page, you have to initiate an instance of Sequence as shown below:

<script type=”text/javascript”>

            $(document).ready(function(){

                        var sequence = $(“#sequence”).sequence(options).data(“sequence”);

            }

</script>

Let me explain the above code. First of all, I’ve saved an instance of Sequence into a variable named sequence. After that, I’ve defined a jQuery selector $(“#sequence”) that will work as the Sequence container. A div with an ID of “sequence” will be created in the HTML shortly.

The sequence(options) is a Sequence function that takes numerous options, allowing you to control the working of Sequence. If you don’t specify your options, then Sequence relies on default settings. Following are options that I’ve specified in my demo code:

var options = {

        nextButton: true,

        prevButton: true,

        pagination: true,

        animateStartingFrameIn: true,

        autoPlay: true,

        autoPlayDelay: 3000,

        preloader: true,

    };

Moreover, you can place more than one instances of Sequence on a web page, like so:

<script type=”text/javascript”>

            $(document).ready(function(){

                        var sequence = $(“#sequence”).sequence(options).data(“sequence”);

                        var sequence2 = $(“#sequence2”).sequence(options2).data(“sequence2”);

            }

</script>

Step 3: HTML Markup

In this step, I’ve created a <div> with the class “sequence-theme” inside the <body> tag, and then inside of this <div>, I’ve added another <div> containing ID “sequence”. The content to be rendered will go in the second <div>.

<body>

<div class=”sequence-theme”>

<div id=”sequence”>

<ul class=”sequence-canvas”>

                                                <li>

                                                            <!–Frame 1 content–>

                                                </li>

                                                <li>

                                                            <!–Frame 2 content–>

                                                </li>

                                                <li>

                                                            <!–Frame 3 content–>

                                                </li>

                                                <li>

                                                            <!–Frame 4 content–>

                                                </li>

                                                <li>

                                                            <!–Frame 5 content–>

                                                </li>  

                                    </ul>

                        </div>

            </div>

</body>

Sequence consists of an unordered list <ul> with a class of “.sequence-canvas”. The <ul> contains <li> elements which are referred to as frames that hold the content of slider. In my demo code, you can see that I’ve added h2, h3, and img elements to each frame with title, subtitle and girl classes respectively.

Step 4: Add Slider Controls

Navigation Control

These controls are buttons, through which a user will be able to move slides in forward and backward directions. To add previous and next buttons to the slider, I’ve created “sequence-prev” and “sequence-next” classes and placed them before the end of second <div> in my demo code. I suggest you to add relevant Alt text to all images, so search engine spiders could better understand them.

<img class=”sequence-prev” src=”common/images/prev-button.png” alt=”Previous Frame” />

<img class=”sequence-next” src=”common/images/next-button.png” alt=”Next Frame” />

Pagination Control

These controls are thumbnail versions of images that I’ve included in each <li> section. Using these thumbnails, a user can move to a specific frame in the slider.

<ul class=”sequence-pagination”>

          <li>

                     Thumbnail Image Source 1

        </li>

        <li>

                     Thumbnail Image Source 2

        </li>

        <li>

                    Thumbnail Image Source 3

        </li>

        <li>

                   Thumbnail Image Source 4

        </li>

        <li>

                   Thumbnail Image Source 5

       </li>

</ul>

Step 5: Style Elements

In this step, styling of the Sequence container and elements inside frames will be done using CSS3. Firstly, I’ll style the Sequence container:

#sequence {

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    width: 100%;

    max-width: 1600px;

    background-image: url(“common/images /Background.jpg”);

    background-repeat: no-repeat;

    background-position: 50% 100%;

    color: white;

    font-size: 0.625em;

    margin: 0 auto;

    position: relative;

    height: 630px;

}

As you can see, I’ve added some basic CSS properties to the container and also given it a relative position. This is an important property, because an absolute position will be given to rest of the elements in the slider like so:

#sequence > .sequence-canvas > li {

    position: absolute;

    width: 100%;

    height: 100%;

    z-index: 1;

    top: -50%;

}

Now, I’m going to style and position previous and next buttons.

.sequence-next,

.sequence-prev {

    color: white;

    cursor: pointer;

    display: none;

    font-weight: bold;

    padding: 10px 15px;

    position: absolute;

    top: 50%;

    z-index: 1000;

    height: 75px;

    margin-top: -47.5px;

}

.sequence-prev {

    left: 3%;

}

.sequence-next {

    right: 3%;

}

.sequence-prev img,

.sequence-next img {

    height: 100%;

    width: auto;

}

Likewise, you need to style and position other content elements using CSS3 as I’ve done in the CSS of my demo code.

Step 6: Animate Elements

By default, Sequence renders the content of the first frame by adding a class of “animate-in” to the first level element in the unordered list. Once the “animate-in” position is reached, Sequence removes the class “animate-in” and adds the “animate-out” to the element. This way, the slider continues to show the content inside container indefinitely. You can control the position and transition duration of each element via CSS3, as show below.

.animate-in .title {

    left: 50%;

    opacity: 1;

    transition-duration: 0.5s;

}

.animate-out .title {

    left: 35%;

    opacity: 0;

    transition-duration: 0.5s;

}

Step 7: Make Your Slider Responsive

To incorporate responsiveness in your slider, you need to use CSS media queries. As different kinds of mobile devices have support for different media queries, you have to target each mobile device according to its screen resolution. For example:

@media only screen and (max-width: 468px) {

    #sequence {

      height: 415px;

}

    #sequence .sequence-pagination {

      opacity: 0;

      visibility: hidden;

}

}

This media query restricts the implementation of CSS styles in 480px or less screen size. The style rules written within the media tag will override any inline style. You can find a comprehensive list of CSS media queries for standard devices here.

That’s all!

To better understand Sequence.js and play around with the demo code, Watch the responsive slider in action.

Live Demo

 
 
Author:
Ajeet is an experienced web developer working with WordpressIntegration – Renowned PSD to WordPress Coders. He loves to share his work experience with others and is passionate about writing on HTML5, Responsive, WordPress and JavaScript. For updates, follow on Twitter.

2 Comments

Trackbacks to this post.
Leave a Comment

Previous Post
«
Next Post
»
© 2010 - 2017 Graphic Design Junction.
Powered by Wordpress.