How to Create a Stunning Slider with CSS3 Animation and Jquery

Today we are going to develop how to create a slider, step by step, with images and captions using Square UI bundle kit. It is a great kit with a good selection of colors and it is suitable for someone who is looking to express a modern design, but at the same time an elegant one.

1

[vc_row][vc_column width=”1/2″]demo[/vc_column][vc_column width=”1/2″]download[/vc_column][/vc_row]

What kind of slider we are looking for?

Before starting to write down code, it is important to have a clear idea of the requirements we need to fullfil to create the slider. In order to make it clear, we are going to establish a list of requisites:

  • The slider should work automatically till the user clicks on a navigation item.
  • Then the animation is stopped and the user can navigate manually.
  • The animation should be mainly done using CSS3 Animations and create a fallback for browsers which do not support it.
  • If the users looses focus on the current page the slider should get paused in order to save browser memory, no matter if it supports or not CSS3 Animations.

Before starting

Before starting with the layout we should consider the following elements:

  • Include jQuery UI in order to animate the navigation items in a similar way that CSS3 Animations does.
  • Include from Google Fonts “Monserrat” typography.
  • Include Modernizr, I used for this tutorial Html5 Boilerplate, which is included on the framework.

Setting the Layout

We are going to set the layout using a div as wrapper at 100% of document width, then inside it we are going to define an article where we are going to include the slider.

The slider contains the following main regions inside it:

  1. Left:  there are two more regions inside it, on top is “up” where the messages are displayed and at bottom “down” where  navigation items are located.
  2. Right: the list of images and the like button.

sliderwithregions

Here is the code for the layout:

There are some things to remark on the layout, specially about the ul class nav items. As it can be seen they have a class for each in order to animate them one by one per time using CSS3, this can be understood when we are going to talk about CSS.

Finally, the first item in the navigation menu has the class selected in order to emulate the change of colors gradually on browsers without support to CSS3.

The CSS

As I chose as framework Html5 Boilerplate, I am not going to refer to any css reset.

I have placed my code in Author´s custom styles in main.css. First we are going to focus in the main structures as the body wrapper, article and the div with class slider-wrapper.

Then our seal will be emphasized on the left side of our layout.

leftside

Here is where animation with CSS3 are done, ul class message and each of the li of ul class are animated using keyframe property:

At the end we find the right part regarding the images and the like button. The ul containing the images is animated using CSS3 and the mentioned button is placed absolutely with no function, but you can attach to it any plugin to share the picture visible in that moment.

rightside

The Scripts

Here we are going to find the script placed inside folder “js”  in the file named  “main.js”  to stop and resume the slider when it is showing the different images and messages. Besides we can simulate the same animation with Jquery animate method on browsers which does not support CSS3. In order to know if the user´s browser can support the CSS3 features we use Modernizr.

Besides, here you can find the code to navigate manually the slider after the user clicks on a nav item, so the animation (CSS3 one or via Javascript) is stopped, and the message and image with the same index of navigation item are displayed.

There is a point to clarify regarding the fallback we are supplying for browsers which does not support CSS3 natively. The slider on those browsers works in a similar way than the automatic animation we have developed for more capable browsers. The idea is to supply to a user for example, of IE9 a very close experience that a Chrome user can have, not the same, but closer as possible using another technology.

Conclusion

This slider is suitable for sites which want to show content dynamically and let the user to experiment the navigation through it. Suitable for modern browsers and for those ones without support of CSS3, with strong aim focus on performance, this could be a great option for your next project.

Written by

I'm amateur web designer and developer. In my spare time I read books, play football.

Hot Deals & Offers!

Find enormous discounts and hot offers for many useful services and products
(designmodo, creative-tim, themify and more)

Check Out Now
Advertisement
2 Comments, leave yours
  1. John Wu Apr 22, 2014, 11:44 am

    Why bother providing fallback? It isn’t it good to keep your code clear?

    Reply
  2. Timmy May 6, 2014, 6:42 pm

    Stunning????

    That’s quite a stretch!

    Reply
Leave a Comment