Follow

Slide Show - Carousel Transition

Carousel is a special transition that works like a continual ribbon or "film strip". The images are seamed together and advance in small increments, instead of transitioning an entire slide. Depending on the size of your images and the available space on your web page you'll be able to see sections of 3 or more slides at any given time. 

The carousel transition only works well with vertical or square images, and they must be smaller to work well. Larger images that take up the entire space of your web page (main body area) will defeat the purpose of the carousel. You also need to have your images cropped or sized the same.

The carousel is ideal for featuring upcoming events, advertisements or promotions, and a fun way to show off new photos, or to engage your visitors with photos that should be in a sequence - such as a time sequence or first, second, third type of progress. And it works well on a mobile and tablet too!

You want to experiment with adding captions and navigation controls to a carousel. Not all controls will look - or work - well on a carousel, depending on the size of your images and other tool property settings. Take a look a few carousel slide show screenshot examples below.

Screen_Shot_2014-05-13_at_10.28.21_AM.png

This is an example of square photos in a main body area. Note how in this example, you can fully see 2 images, and the start of a third image.

Screen_Shot_2014-05-13_at_10.39.51_AM.png 

In the example above, the use of circle controls isn't working out the best, but by simply switching the controls to thumbnails (or even none), you can achieve a much better look.

Screen_Shot_2014-05-13_at_10.53.31_AM.png

In the above example, you have uniformly cropped images, small enough to fit several images across the web page, and then the use of thumbnail controls for the user to control the slide show. 

How to Work with the Carousel Transition

As stated above, the carousel works best with a vertical (portrait-oriented) or square images. Because of the carousel transition's unique look, some of the properties will need to be different than if you were creating a traditional slide show.

Width Options: The carousel can be any width, although it looks best when it is wider, spanning either the full content area or the full width of the site. A small carousel will not give the images enough room to move across and it will defeat the purpose of the carousel.

Maximum Photo Width x Height: Typically, you leave the maximum width and height of the image to match the width option chosen, but the carousel is an exception. While you want a full width slideshow, you do not want your images to be the full width of the page, because this would not allow the carousel to function properly. Again, this will work best with either vertical (portrait-oriented) or square images. 

Screen_Shot_2014-05-16_at_1.26.09_AM.png

Display Properties

Captions: Because of how multiple images appear at the same time and are continuously scrolling across the screen with the carousel transition, we do not recommend using captions with this transition.

Controls: Depending on the actual dimensions and width of your slide show, different control types may work better than others. If you do not like how the controls look after adding your slide show, go back into the properties to change them. 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk