A few clicks will suffice for creation of one of the most wonderful slideshows! Here is an example:
View your CSS3 slideshow after you have created it! You will get something like this:
Code to paste between the tags <head></head>:
HTML code to paste between the tags <body></body> in the place that you want the CSS3 Slideshow to appear:
This slider has a clean and modern design that is both light and attractive.
The slider has a narrow white border, that would stand out well against a dark or colored website background. There are no navigational arrows until you hover over the slider, when they appear on each side. The navigational arrows are white, and are contained within a transparent circle with a white border. The overall effect is bold but minimal. Hovering over the navigational arrow makes the circle fill in with a semi-transparent white, that still allows the image below to show through.
You can use the navigation arrows to click through the slides, or return to a previous slide.
In the bottom left corner is a caption. It uses a white font against a semi-transparent rectangle with rounded corners. The rectangle also has a thin white border. The caption is in uppercase, and again the effect is bold but minimalist. The font used in the caption is ‘open sans’, a humanist sans serif font that looks very modern thanks to it’s clean appearance and open forms.
At the bottom of the slider is a series of transparent circles with thin white borders. Each circle represents a slide, and as the current slide comes into view the circle is highlighted by a white dot in the centre.
Hovering over a circle brings up a preview of the relevant slide, again with a thin white border. The preview image also has a semi-transparent white arrow pointing to the relevant circle. Clicking on a circle will cause the slider to skip to the relevant slide, allowing people to navigate directly to the slides they are interested in.
The default transition effect is called domino. The image is overlaid with the next slide, which moves into place across a series of squares. It’s an interesting effect, which feels both clean and modern. There are a number of other change effects to choose from, but if you wanted to retain the modern feel some good options are ‘glass parallax’ and ‘seven’, both of which contain lots of movement and clean, modern lines.
The slider only uses the color white, which means it’s very minimal in feel, but the clever use of transparency stops it from becoming too simplistic. Overall, the design is very well thought out.
This slider would be fantastic for websites with a monochrome color scheme. It would also work well with any clean, minimalist design. Technology companies, and modern learning institutions would benefit from this slider.