Intro:

I have seen this request again and again over time where people were trying hard to come up with a simple yet elegant slider that utilizes CSS3 and does not require any javascript or jquery code to work. Well i have been working on a pretty simple pure css slider and wanted to share it with all my coding community.

It utilizes CSS3 animation as it's tool and works with the images to form a simple continuous slider that can be hooked up into any web application. Mostly cross browser (So far tested in IE, Firefox and Chrome), now i have not tested this in very old browser versions yet but i guess its time we say good bye to the old versions and work with the latest ones that provide us more flexibility and efficiency when working with web applications.

Also this slider can be used in both horizontal and vertical slide movements. Another key feature is that instead of moving the images, it encapsulates the images (and any text layer) within a div that actually moves. So you can use this same slider to slide text or any other html content you want. Lastly, all of this is responsive as i am using viewport measuring unit (vw and vh) to keep it in shape no matter what the size.

I hope that this helps alot of people in search for a simple css slider and that they can modify and use it as they see fit. (Note: There still might be some scenarios/issues that i may have not yet come to know so do let me know or feel free to fix them if you find any)

So without further wait, here is the PCRS v1.0

How it works:

The PCRS slider uses 2 css animations on the slide boxes within it. The first animation controls the movement of the first slide box within the slider and the second animation controls the rest of the slide boxes. The reason for using 2 different animations here is to keep this slider moving continously from right to left (or bottom to top) without any break or reverse movement.

So what happens is that when the first slide box move out of the view box to the left, the animation takes it and positions it to the very last, right after the last slide box. When the second animation controlling the rest of the boxes reaches the last slide box and starts moving it to left, the first animation in parallel starts moving the first slide back into view. Now while the first slide box is showing and before it starts moving, the second animation takes the rest of the slide boxes from the left back to the right of the first slide box. And then when the first slide box starts moving to the left, the second animation in parallel starts moving all the other slide boxes in line to the left. Hence creating the illusion of a continuous left to right movement of the slide boxes without any break.

Along with the slide boxes, we also have a text layer on top of each slide box for use if you want to show some text or tag line over each slide box image and you can easily position the text by controlling it's class's top and left position markers in css.

Code:

The sample i am about to share with you uses 5 images and the animation key frames are adjusted to handle the 5 images. If you do want to add or remove images within the slider then these animation key frames will need to be adjusted accordingly. I have added comments within the code to make it as easy to understand as possible but if anyone still needs help then you can certainly let me know and i will be more than happy to help. This is the first version(v1.0) of the PCRS. I am working on version 2 which will include navigation buttons or left right arrows that you will have able to use to come back to a slide you want to see again. Hope you like it. Happy Coding!!!

Horizontal Slider:

Vertical Slider:


1,458 0 0