Slide Animation & Boundary Layout Jquery Content Slider
This slightly unusual slider theme is very modern and attractive. It is a more ‘square’ shape than most website sliders, which allows is to work for images that aren’t landscape. It could be a great addition for a portfolio website, or to showcase portraits of people and animals.
The slider uses a deep burgundy color scheme, offset with white. It’s an unusual and striking color, that suggests luxury and sophistication.
Each image in the slider zooms in and out, slowly fading at the same time to reveal the next image.
In the bottom left corner is a single line of a caption. This is white text on a burgundy rectangle, that slides in from the left. The rectangle sits flush with the corner of the slider, which means they don’t cover up or distract from the images.
The caption uses a sophisticated serif font called Lora.
In the bottom right corner is a series of round burgundy circles. Each of these circles is linked to an image in the slideshow. The circle linked to the active image contains a white dot in the center.
Hovering over the circles brings up a preview of the relevant image. Clicking will load that image into the slideshow.
In addition, hovering over the circles brings up another, final circle which contains either a pause icon or a play icon.
One of the most attractive parts of this slider design is the next/previous arrows that appear when you hover over the slider.
These are two vertically aligned rectangles, in burgundy, that sit flush to the left and right edge of the slideshow. Inside is a thin white arrow. Hovering over one of the arrows, however, causes it to become taller and than slide outwards, forming a frame for a thumbnail of the next/previous image in the slider. The overall feel of the animation is great, everything is smooth, seamless and the perfect speed.
Overall, this slider theme is warm, sophisticated and modern — it would be ideal for an antiques website, any site selling luxury goods such as perfume, or a studio photographer who specialized in luxurious settings.
As you would expect, the slider is responsive and fits itself to the size of the screen automatically. On smaller screens some of the functionality disappears, allowing more of the image to show and keeping things simple for touchscreen users.
The slider uses CSS3 and HTML5 to achieve all of the transitions and iconography — there are no images used (apart from those within the slider itself) to slow the website down or cause problems with loading. Because the slider does not use Javascript or JQuery it will work on all modern platforms, and again there are no external scripts to cause lag or loading problems.
In fact, this is an excellent slider theme that would be a great addition to almost any website.