Sliders Responsive jQuery

Examples and implementation of jQuery Responsive sliders, which adapt to the dimensions of the browser window and to all devices.

As you already know, today we cannot limit ourselves to designing websites so that only desktop computers look good. Currently there are many other forms of Internet access that are gaining more prominence every day: tablets, mobile phones, televisions, consoles, among other devices. Because of this, in the new generation websites, we must worry about accessibility and usability, no matter what type of system the user enters from. That is what the already famous , which serves as the motivation to write this article, is based on.

The rich graphical interface components are no exception and must also be carried out taking into account their correct visualization on all types of devices. In the case of “sliders”, there are several jQuery plugins to facilitate the task of making them adaptable to different screen formats, basically, what a “responsive slider” would be.

For those who don’t know, sliders are small image transitions, which can be used to illustrate the most important posts on our website: an advertisement, a product presentation, etc. Through these plugins, as long as they have been built with the “responsive” philosophy, we can incorporate them into our websites and they will adapt to the dimensions of our browser.

jQuery plugins for responsive sliders

We will start by showing some examples of jQuery plugins for creating responsive presentations or sliders.

:

This plugin will allow you to create a small photo gallery in which you will have the thumbnail images at the bottom and a larger container at the top, where you will see the selected image in a larger size.

:

Allows you to create a simple and elastic presentation with a thumbnail preview. The presentation will automatically fit the surrounding container and we can navigate the slides using the thumbnail preview or auto slideshow option.

This slider has the particularity of presenting the touch option, with which any device with this feature can use it to interact with this slider.

Add a slider to our website

We already presented some plugins to incorporate a slider to our website, so now we are going to entertain ourselves with a concrete example of creating a presentation. For our example we will use the .

Let’s start by creating a folder for our website and hosting our slider images in that folder. We must make sure that these images have the same size.

We will download the files for our slider from its page. The .zip file contains the structure that can be seen in the image of this article, with the files that are part of the download.

Here, the most important files for our purposes are flexslider.css, jquery.flexslider.js, theme/bg_control_nav.png, theme/bg_direction_nav.png. So we take these files and copy them into our example folder.

Then we will go on to define our .html file where our slider will be. We create an index.html file with the following content:

For our example we will use the jQuery framework found on the Google CDN. This URL allows you to get the latest version of jQuery found in the repository.

On the other hand, we will see a DIV with the “flex-container” class, inside this one with the “flexslider” class and finally a list ( UL ) with the “slides” class. These are necessary to apply the slider styles and detect where we want to apply the plugin.

Each list item contains one of the chosen images and a paragraph to place a short image description.

As you can see, we also incorporate our own style sheet called “/articulos/style.css”. Here we will define our styles, either for our web project or also to modify some CSS style of the plugin.

Note: Although you can touch the plugin’s style sheet, it is not highly recommended, since if we want to modify them in the future, that task will be more complicated since all the styles are together. In this way, and respecting the import order of the style sheets in the HTML, we will be able to modify the styles that we want, making their maintenance easier.

We also import our file called “/articulos/scripts.js”. Here we will put all our Javascript code, with which we create this file inside our project folder and insert the following code:

$(window).load(function() {
$(‘.flexslider’).flexslider();
});

If we open the index.html page in our browser, we will see that the description block exceeds our slider. To solve it we must modify our container. In our style sheet we add the following code:

.flex-container{
width: 100%;
max-width: 960px;
}

As you will see, I used relative size as width and just fixed width in the max-width delimiter. This is very important, since do not forget that we are designing a responsive web, and this is one of the bases of it.
In our example, another thing we don’t see yet are the slider controls. If we locate the file “/articulos/flexslider.css” in line 56 and 65, we will see the following styles:

56: .flex-direction-nav a { width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(theme/bg_direction_nav.png) no-repeat; position: absolute; top: 50%; cursor: pointer; text-indent: -999em;}

65: .flex-control-nav a { width: 13px; height: 13px; display: block; background: url(theme/bg_control_nav.png) no-repeat; cursor: pointer; text-indent: -999em;}

We will verify that the files (images) where these controls are are not in the same place where we host them in our example. To solve it we are going to go to our style sheet and add the following lines:

.flex-direction-nav a {background: url(bg_direction_nav.png);}

.flex-control-nav a {background: url(bg_control_nav.png);}

The paths can be customized to your liking, but by doing this we make sure that it puts those files in the right place. This is how we have implemented, with a few lines of code, our basic slider, you can customize it even more, to obtain the desired result.

Plugin configuration…

Ok, so far we’ve implemented our slider in its basic form, but this plugin allows us to customize the slider even further. Let’s see some attributes to give it more functionality:

The animation:

This plugin contains two types of animations, the “fade” and the “slide”. By default it uses the “fade” (as in our example), but now we will see the “slide”. Let’s modify the scripts.js file:

$(window).load(function() {
$(‘.flexslider’).flexslider();
});

By…

$(window).load(function() {
$(‘.flexslider’).flexslider({
animation: “slide”,
controlsContainer: “.flex-container”
});
});

In this way we change the animation to slide. We also see the “controlsContainer” attribute, this is because the slide animation joins all the images in a single row and hides the images that should not be seen, and for this it requires an additional container, which includes one more level to our slider . In our case it is the DIV with the class “flex-container”.

We can also change the direction of the animation by adding the following attribute:

direction: “vertical”

Note: The default is “horizontal”.

Animation times:

Many times we want the times of our sliders to vary, either by customer decision, by our design, etc. To do this we can customize it with the following attributes:

slideshow Speed: 7000,
animation Speed: 600,

The “slideshowSpeed” is the time in which the slide will remain visible measured in milliseconds, and the “animationSpeed” is the animation time from one slide to another, also in milliseconds.

We can see a

These are some of its properties, but there are many more. I invite you to experience each of them and see which ones are available on the official page of this plugin.

This has been all, I hope you liked it and for any questions do not hesitate to contact me.