Carousels

The basic carousel is created by adding the .carousel class to a container. Then picture link elements are placed inside it using the .carousel-item class.

If you are viewing the carousel in Site Designer only one image will show. You can see other images by going to the element pane and toggling the eye icon.

In the browser the images will be placed in perspective. The user can click or swipe to bring them forward and make the carousel move.

The HTML struture of the medium carousel is the same as the Basic carousel. By adding the .medium-carousel class to both the container and carousel items (the picture links) the width and height are manipulated at some of the breakpoints.

You can customize the height and width to your liking. Just make sure to do this for the combined class selector on the container and items.

The Full-width Carousel is created by adding a small piece of javascript to the carousel through an HTML Element. This javascript looks for carousels with the .carousel-fullwidth class and adds the 'fullwidth' and 'indicator' options. There is really no need to worry about this, as long as you reuse entire carousel container (the one with the .carousel-fullwidth and .carousel-slider classes) in your projects.

Unfortunatly you can not manipulate the indicator position, indicators sizes and colors using the Site Designer controls. However, that is easy to do in the HTML Element as well — I will supply a cool component with an example below.

These carousels are touch compatible, try swiping the slides with your finger or a mouse.

The carousel doesn't only support images but also allows you to create content slides. Instead of a picture link a container is added to the carousel parent. Then, each slide container gets the .carousel-item class.

Since the display property is manipulated by the javascript it is best to insert an additional container for layout purposes. Then any type of content can be added, additional container, images, buttons, headers, paragraphs. This way the layout can be manipulated without affecting the display of the slide itself. I gave this container the .slide-layout class.

You can also add fixed items to the carousel. This item will remain visible while the slides rotate underneath. Fixed items are created by inserting a div with the class .carousel-fixed-item. Then add your fixed content in there.

You can also add fixed items to the carousel. This item will remain visible while the slides rotate underneath. Fixed items are created by inserting a div with the class .carousel-fixed-item. Then add your fixed content in there.

A little script makes this carousel auto-play. In short this script looks for a carousel with the ID #car-auto-play and makes the slide move every 4 seconds. If you would like to adjust the timing simply change the value inside of the HTML Element (simply click on the slide below and you will see it on the Elements pane just above the current selection.