This carousel gallery has a fixed height that decreases as the window width decreases, which helps keep the narrow carousel look. Expanded mode is enabled as well as prev/next buttons and automatic slideshow mode. Change the browser window size to see how the height changes as the width changes. Click the expanded mode icon to preview how it looks full window. Click below for instructions and screenshots on how to create the basic features of this example style.
Steps for exactly replicating this style
Tips for carousel galleries
- Portrait oriented images work great, as they allow for more images to be seen on the left and right.
- Play with the height value at the different breakpoint widths to get an aspect ratio that allows next and previous images to be seen.
- The more width available for the gallery, the better it will look. If there is not enough width and/or if the height is too tall, you risk the carousel looking like a slider gallery, especially when landscape images are used
- Since carousels are fixed height, you’ll never need an image taller than the max height you have set. For best results upload an image that is twice as tall as the height set for desktop. So if it’s set to 600px the max height of images you need will be 1200px. It’s ok to upload larger but if you are trying to go as small as possible, this is handy to know.