X
Back to the
Component Shop Read this first! Accordion Alert / Callout Another Lightbox Gallery Audio Player with Playlist Auto Sidebar Backbutton Basic Form Before/After Comparison Buttons Collapsible Alert Contact Form Count-down Script Crossfade Slider CSS Parallax Cut-out Text Decorative Background Details/Summary Classes Drilldown Menu Drop-down Easy Mega Menu Equal Height Columns Filtered Portfolio Flip-cards Glossary Table Hamburger Menu HTML Quiz Horizontal Tabs Image Gallery Image Modal Image Shapes Image Slider with Fade Jquery Parallax Lazy Loading Lightbox Gallery Magnifying Glass Masonry Grid Gallery Mega Menu Modal Optimal Image Sizes Oval Image PHP Includes Range Slider Read More Button Responsive Card Table Responsive Navbar Responsive Shrinknav Responsive Sidebar Responsive Table Round Image Scroll to Top Searchbox Simple Shapes Simple Cards Simple Slider Skill Bars Slide-in Nav Sticky Mega Menu Sticky Vertical Menu Subnav in Dropdowns Tabbed Gallery Tab Navigation Text on Image Translucent Image Translucent Text Layer Vertical Tabs Video Video Scroller Wrapping Text Years Completed Zebra Striped Table
☰

Crossfade Slider

The arrival of our local sailing ship, the 'Sørlandet'.

One of our far-away guests: the 'Bima Suci' from Indonesia.

All 35 ships anchored up along the quays in and around the Arendal centre.

The locals are enjoying the nice weather and the view of the 'Tenacious' of Southampton.

A sailor girl coming down after some work up in the masts.

The shanties singing crew of the Dutch ship 'Morgenster'.

Fireworks on the last evening of the event.

An armada of small boats in the wake of the large ships bidding goodbye.

Put your page content here!

This container can be sized, styled, tweaked and edited to your liking.

The slider has a simple construction. The images are added from an array that is running in a JavaScript and are being shown in containers which are just holding the text for each image. There is also a separate container for you to pop your page contents into. The JS will make the slider work, and there is a little bit of transiltion settings for the fading effect.
 
The slider 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 slider full-width, or you can limit it to a certain width in pixels.
 
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).
 
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 like it.
 
The second slider is full-width, and it can be used the same way as the first one. It contains some notes and instructions.

Download the component (displayed).

Download the full-width component.