There's a great deal of configurations that you may tweak, including perfect transition effects and vibrant flat designs, prev/next navigation, bullets with thumbnails, auto-play, pause/stop, full width, full screen and additional options.
Run css Slider website builder in two distinct configuration styles: Basic and Advanced. Pick from several built in layout looks to keep things real simple, or dive in to edit the settings in whatever way you'd like for total control.
CSS Slider doesn't utilize images for styling so the skin color can be conveniently switched
Liquid slider matches wonderfully to your page, despite of the screen dimension
No more need for separate picture editing applications. The cssSlider instantly crops your images and resizes them to match whatever dimension you define!
All slider navigation controls are vector font and they are perfect on hi-res screens
Silky smooth hardware-accelerated animations work much better than jQuery ones, especially on mobile gadgets
This carousel has a modern, stylish design. It uses white, orange, and black to great effect and by using semi-transparency the designer gives the slider a modern edge. Because the design is stylish and eye-catching, it would be great for fashion designers or journalists, or fashion bloggers. It would also work for a stylish and elegant restaurant. Indeed, any company that wants to create a sophisticated brand could use this slider design.
There is no frame or border around the slides, which allows the images to have maximum impact. Hovering the slide brings up two arrows, each allowing the user to navigate through the slides. The arrows are white arrow heads on a black semi-transparent rectangle with rounded corners. This rectangle is vertically orientated. The arrow flips in like it hinged on one side and then opens like a small door. There is a subtle bounce when it finishes 'opening', which helps it feel almost tangible.
Hovering over the arrow stretches the vertical rectangle into a square, that directly touches the edge. The square turns orange, the arrow moves outwards slightly in order to remain at the center of the square. The whole effect is stylish and unique.
Cycle through the images by clicking on the arrows.
The slider has a caption in the bottom left corner, comprised of a main title and a smaller ubtitle. The main title uses white text on a black rectangle with slightly rounded corners. The rectangle is semi-transparent. The sub-title is white text on an orange rectangle with slightly rounded corners. They both flip into place, in a similar fashion to the navigation arrow. They are both hinged along the top axis, but both appear at slightly different times, creating a 'cascade' effect.
The text then slides in from the side - the left on the main title and the right on the sub-title. Again, the whole thing is eye-catching.
The font used is Roboto, a stylish sans-serif font with geometric forms that retains a natural feel.
There are a series of black semi-transparent circles at the center bottom of the slideshow. Each one represents one of the images. The circle that is linked to the image on display turns orange and becomes opaque.
Hovering over a circle brings up a small preview image in an orange frame, and with a small orange arrow at the bottom pointing to the circle. This preview image is hinged from the bottom and flips into place. This effect replicates the look-n-feel of the nav arrows and captions.
The user can go directly to the image they really want to see by clicking on the appropriate circle.
The change effect on this demo is 'zoom', which zooms and fades out the current image and zooms and fades in the next image. It works well with the stylish look, and replicates the use of semi-transparency which helps give the modern design a lot of depth and sophistication.