20. Carousel

The digital landscape today requires interactive elements for better user engagement, and one such element is the carousel. Here's a detailed guide on customizing the carousel element on your webpage using Stylie.

Adding the Carousel Element Start by clicking on the '+' icon in the empty block, navigate to 'Media', and find the carousel element. Click, hold, and drag it onto your page. Initially, you'll notice content structured within columns (represented as blue boxes), navigation arrows on either side to cycle through the columns, and dot navigation at the bottom. The number of dots represents the number of columns or cards, indicating which one is currently in focus.

Customizing Columns and Navigation Access the carousel settings by clicking on the top right corner. You can alter the number of columns, from three to as many as six. When the number of columns is less than the display capability, navigation arrows and dots appear. You can also set 'Auto play' for automatic column transition, although it is suggested to keep this feature off while working on the design.

Optimizing for Mobile Devices Usually, a single column display is preferred for mobile devices. Check the responsive view to ensure your carousel looks good on tablet and mobile devices before copying your design.

Content Spacing and Navigation Settings Customize the space between columns, choose which arrows to display, and set the spacing between content and arrows. For dot navigation, you can choose to turn it off or select any of the other available options.

Customizing Content The carousel is essentially a column with general content that can include an image, text, and a button. Bring in any element from the panel to build out yours, then copy and paste the structure into all columns for a uniform look.

Reordering Columns To reorder columns, use the arrows in the column settings, which will allow you to move them right or left.

Color and Links Set unique colors for your arrows and dots for better visual engagement. Each column can also contain normal links like URLs, blocks, download files, or pop-ups, making the carousel a versatile element.

Checking Responsiveness Always check the responsiveness and make necessary changes for better visibility, especially for arrow positioning. Adjust padding on the left and right to give your arrows more visibility.

The carousel element, with its rich features, provides an interactive browsing experience for your users. Customize it to suit your brand and content strategy, ensuring it is equally effective across all devices.