With the drag-n-drop, cssSlider couldn't be easier to use. Add and remove images, alter the ordering, embed sliders in a couple of clicks.
Every Single cssSlider design goes with 6 pre-made color design to make your choice easier.
cssSlider is completely compatible with any and all mobile devices and will run just as well on your iPhone, iPad, Android as it does on your home desktop.
No more need for different image editing software. The cssSlider instantly crops your pictures and resizes them to suit whatever size you specify!
Visitors do not always explore your website from the comforts of their home office pc. Many use smart phones, tablets, laptops, or one of many other countless devices available. This powerful, adaptive slider will perfectly scale itself to fit any monitor sizes, guaranteeing your blog will appear fantastic on any device!
The slider bullets, play/pause, prev/next and other controls are vector font, making them monitor size independent and great for retina high-res displays.
This cssSlider template for a website slideshow is clean and simple, but contains a dash of organic motion that stops it from feeling too cold and clinical. The use of dark grey and turquoise is stylish and attractive, and creates a color scheme that is flexible enough to be used for a wide-range of websites.
The carousel itself is tall and square-ish, creating maximum impact as well as allowing the template to be used with a wide-range of images (not just landscape). There is no border or shadow effect, which means the template can be used against any background color. It also adds to the clean and simple look of the slideshow.
Each image in this jQuery-free carousel fades into view, as the ‘camera’ zooms out slowly. The image pauses for a moment, and then fades and zooms in the reverse direction. This transition effect is smooth and attractive, without being overly complicated and distracting.
There are two ways to navigate through the slideshow. The first is via the use of navigational arrows. These arrows only appear when you hover over the slideshow. A thin turquoise arrows sit in the center of a dark grey square. This square fades and drops into place when the user hovers over the slideshow, and lifts and fades away when the user stops interacting with the slideshow.
When the user hovers over the arrow, there is another interesting effect. The square ‘turns over’, like a cube, to a different side which has the colors in reverse. Again, it’s a simple effect that goes a long way to making this template stand out from the crowd.
The second way to navigate through the slideshow is via the small squares at the bottom center of the carousel jQuery. Each square represents a slide in the slideshow, and hovering over them brings up a preview of that slide. Clicking on the square allows you to jump immediately to that image.
These squares are also grey, with the slide representing the current slide in turquoise. A similar effect to the navigational arrows is used on the squares: when the user hovers over one, it turns over like a cube, showing a different ‘face’, that is turquoise.
Finally, there is a caption in the right-bottom corner of the slideshow. This caption is in two parts, the title is in all-caps, and the sub-title is in normal case. Each title is turquoise writing on a dark grey square. These squares ‘pop’ into place, with just a small ‘bounce-back’ at the end that gives the a motion a very organic and natural feel.
The captions use the font ‘Gurajada’, which is a clean font that retains a hand-written feel. It is easy to read, and works very well with this simple, minimalist but organic looking slideshow template.
If you want a slideshow theme for your website that is understated elegance, you need look no further than this beautiful template from cssSlider.
The slideshow is smooth, clean and minimalist, however the use of turquoise and dark grey gives the design a warmth and a dash of style that is often missing from minimalist designs. This warmth is reinforced through the use of the font ‘Gurajada’, which is a clean handwriting font that works well with this template.
The slideshow is quite large and fairly square in shape — ideal for a website that wants to put the focus on the images.
When you first look at the slideshow, you see the ‘bullet navigation’ at the bottom center of the image, and the caption in the bottom-right corner.
The bullet navigation is made up of dark grey squares. Each one represents an image in the slideshow. When that image is active, the square turns turquoise. Hovering over a square brings up a preview of the relevant image, and clicking on the square loads that image into the slideshow — enabling the user to skip to the image that interests them the most.
The caption comprises of two dark grey boxes, one for a title and one for a subtitle. These ‘pop’ into place with each new image, the transition effect is smooth and organic, with a little ‘bounce back’ at the end of the effect. The text is turquoise, with the main title in capitals and the subtitle in a smaller font-size.
Hovering over the slideshow brings up additional navigation options. Two dark-grey squares drop into place on each edge of the slideshow. They have a turquoise arrow-head, and when you hover over them they flip over like a cube to reveal a side with the colors inverted.
Clicking on the arrow-head allows the user to navigate through the images in the slideshow.
The transition effect on the images in the slideshow is a slow fade. The first image fades and zooms out, whilst the new image fades and zooms in. The result is simple but effective, with the fade not distracting attention from the images.
Because of the clean design and elegant simplicity, this theme would be great for websites selling luxury products such as automobiles, jewelry or high-class food. Fashion websites would also benefit from the large size of the images and the way the theme allows the images to take most of the attention.
Mobile friendly website will also benefit from the modern build that takes full advantage of CSS3 and HTML5.