Latest Items added:

Full Component List:

Crossfade Gallery

Put your page content here!

This container can be sized, styled, edited and tweaked to your liking. While editing, you can close the images if they are disturbing you, just click on the eye icons on the inspector pane.

Crossfade Gallery

The slider has a simple, though sturdy, construction. a minimum of 2 containers, 3 containers if a banner is added, and then the link containers with an image background. Here they come bundled with a separate container for you to pop your page contents into. There is also some JS to make the slider work, and a little bit of transiltion settings for the fading effect.

The first gallery takes up 60% of the page width and has a banner and some caption text. The width can easily be changed, and you may have to use some maths to calculate the heigth according to the aspect ratio of your images. This way you can make the gallery full-width, or you can limit it to a certain width in pixels, as seen in the 2nd and 3rd galleries.

The 4th gallery is simpler. Instead of link containers it has just the images, and it can be used if you just want to have some rolling pictures without any extra fuss. This gallery can also be made less wide, just as the other ones, and positioned to one side of the page with some other content next to it.

It is possible to add pictures - or take away some - and change the speed of the transition cycle (the pictures are changing every 5 seconds, look for the number '5000' in the JS).

When you open one of the galleries in SD it will look like a column of images, or none at all if the eye icons are closed (check the Inspector pane, and open at least one eye if they are closed). However, everything will fall into place when previewed in a browser.

The background colour of the extra container (for your content) is only there to show the size of it. It can be tweaked the way you want.

Placeholder Picture

Download this component (displayed)

Placeholder Picture

Download the 100% width variant

Placeholder Picture

Download the variant limited to 600px width

Placeholder Picture

Download the simple variant without
links, banner or captions