This video can help you develop mobile-friendly CSS Galleries in a quick and simple manner!
In this video you can learn about transition effects which can be used for website sliders!
Code to paste between the tags <head></head>:
HTML code to paste between the tags <body></body> in the place that you want the CSS Gallery to appear:
This slider is simple but stunning. The images take your full attention, with very little distracting detail from the slider design.
There is no frame or border effect around the slides, so your images take pride of place and can take up the maximum amount of space. When you are not interacting with the slider, there are no navigation arrows displayed, again allowing the images to stand on their own.
When you hover over the slider, two navigation arrows appear. They are very simple, a thin black arrowhead against a white triangle background. It is modern and minimalist in style and take up very little space.
In the bottom-right corner are a series of white dots, which represent slides. These again are small and unobtrusive. A second white ring appears around the dot which represents the current slide. If you hover over the dots, a slide preview appears in a white frame and allows you to navigate to the slide you want to see.
Unlike other sliders, there is no way to ‘pause’ the slideshow. Hovering over the images does not stop them from cycling through, and there are no pause controls on the slider. This is a deliberate choice, by stripping away extraneous detail the slider can focus on its core job — displaying a set of stunning images.
A caption appears in the bottom left corner, in white text with no background. There is a title, in a larger size and all capitals. A smaller subtitle appears below, in normal lettering.
The font used for the caption is Roboto Condensed, a very modern, geometric san-serif font. However, by allowing letters to settle to a natural width, this font allows for a natural reading rhythm. Because it is condensed, the caption takes up a small amount of space and because there is no background to the captions, the captions do not distract from the images. However, this does mean you will need to use dark images for the captions to show up.
The slider is responsive, re-sizing itself proportionally to fit any screen-size. There are a number of ‘change effects’ to choose from, but the default ‘collage’ effect is modern and simple and works well with the design.
The overall effect is a clean, simple and minimalist slider design that allows the images in the slides to come to the full attention of the user. This slider would be ideal for anyone needing to show off fantastic images — a photography website, an artist looking to display their artwork or a hotel or travel agency with a series of beautiful exotic landscapes to display.
Because it is so clean and modern, this slider design would also be a great choice for a technology or robotics website, or science-fiction author.