Adaptive slider suits nicely to your website, despite of the display size
All slider navigation controls are vector icon font and they're excellent on hi-res monitors and screens
Silky smooth hardware-accelerated animations run a lot better than jQuery ones, especially on mobile gadgets
Prepare your slider in a few clicks with the visual creator
No more need for separate photo editing tools. The cssSlider automatically crops your images and resizes them to fit whatever dimension you specify!
Easy to use, you just assign a variety of skins, colors and effects from the library to your slider. There is absolutely no understanding of programming necessary in any way. You won't need to type a line of code!
cssSlider is made with plain HTML5. It looks excellent and search engines are still able to spider it effortlessly. This enables you to keep your website visitors and search engines each satisfied all at once!
If you want a quirky, fun but modern slideshow template for your website, then this particular template from cssSlider could well be the one you are looking for.
Using modern, clean lines and cutting edge web technology to create a fast, responsive slideshow, the design nonetheless keeps a friendly and quirky touch through the use of an attractive green-blue color scheme and a handwritten font.
The slideshow itself has relatively small images, so that the slider doesn’t dominate the website. It’s ideal to showcase particular articles on a blog, or to show off products on an e-commerce website.
When you first look at the slider, you notice that the images are in constant, gentle motion. They transition by fading and moving slowly across the slider. It’s attractive, and the constant motion is eye-catching.
In the bottom left corner is a caption. This is a green-blue rectangle that slides in from the left of the slider. This rectangle is flush to the left and bottom of the slider, which is unusual and gives the design a modern, slightly quirky feel. The font used is a cursive one called ‘Indie Flower’ — it’s carefree and open, with rounded edges. It is a great counterpoint to the otherwise square lines of the design.
On the opposite, bottom right corner is a long green-blue rectangle with a pause symbol directly next to the corner. One ‘square’ of this rectangle is a slightly darker shade of green. This square moves along the length of the rectangle, and is the only sign that this area of the slider can be used to jump between slides. It’s a nicely discreet piece of functionality.
Hovering over the ‘parts’ of the rectangle brings up preview images, in a square shape. Clicking these parts of the rectangle loads the image into the slider. It also automatically pauses the slider.
When paused, the icon in the bottom right corner turns into a ‘play’ button. Clicking this button will restart the slideshow.
Finally, hovering over the slideshow will bring up two squares, one on the left and one on the right. These squares are flush to the edge of the slider, and contain double-arrowheads. These function as next and previous navigation arrows. Hovering over one of the square brings up a preview of the next/previous image. The image flips up, like a cube opening.
As you would expect, clicking these arrows loads the relevant image into the slideshow.
Overall, this attractive template would work well for many blogs, or small ‘indie’ e-commerce sites as it has a slightly handmade but modern feel.
As with all cssSlider designs, the slider is fast to load, responsive and works across all modern platforms.