I use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

Today we are going to create a fullscreen, responsive and easy to customize slice hero slider using HTML5, CSS3, and jQuery. You can use it for product presentations on your shop website or for projects presentations on your portfolio website.

COIDEA - Fullscreen Slice Hero Slider

Attention: Note that we use modern CSS properties like a "flex display", "viewport width or height" and "calc" property in this demo.

It is a common approach to fill in the intro section of a website with a slideshow or a slider: you're trying to show the users as much as you can above the fold, yet you want to deliver this information in an organized and clean way.

Therefore we built for you a ready-to-use HTML5, CSS3 and jQuery slider. In an attempt to increase user engagement, we cut our slider in two sections which are separately animated and we added the main image as third element of the slider which has own animations, too. As the fourth element, you can see the indicators which are holding our triggers for changing screens and activating animations.

We hope you like this challenge and find it inspirational.

References and Credits