Carousel

HTML Snippet

<div class="aploze-widget" data-type="carousel"></div>

By defaut, all highlight are automatically displayed, but you can also create a carousel widget with specific highlights by creating a watchlist in admin. Then, you will need to pass a data-watchlist attribute to specify which watchlist you want to display. You can find a ready-to-use snippet in settings of each watchlist in Aploze Admin.

Attributes

Here all attributes you can use in a HTML widget element:

Key

Value

Description

data-type*

String

Widget type

data-watchlist

String

Watchlist ID (not needed for the All Highlight) playlist

data-radius

Boolean

Border Radius

data-dark

Boolean (true or false) or String (auto)

"true" if your background is always dark, "auto" if you support dark & light mode

data-no-animation

Boolean (default: false)

Disable the auto animation preview (cards will only animate on hover)

data-stop-animation

Boolean (default: false)

Adds a pause button on top left corner of the highlight to pause the animation

data-new-pill-disabled

Boolean (default: false)

Show the new pill or not

* Required fields

CSS Classes

You can customize your widget appearance by overwriting the CSS, here all CSS classes you can select:

Name

Description

.aploze-carousel

Carousel Widget

.aploze-carousel-wrap

Widget Wrap

.aploze-carousel-grid

Widget Grid

.aploze-carousel-nav

Nav Arrows

.aploze-carousel-nav-btn

Nav Arrows Buttons

.aploze-carousel-card

Carousel Card

.aploze-carousel-card-pill

"New" Red Pill

.aploze-carousel-card-title

First Big Event Card

.aploze-carousel-card-img

Card Image Element

.aploze-carousel-card-play

Card Play Icon

.aploze-carousel-card-title

Card Highlight Title

.aploze-carousel-card-boost

Highlight Boost Wrapper

.aploze-carousel-card-boost--title

Boost Title

.aploze-carousel-card-boost--emoji

Boost Emoji

.aploze-carousel-card-stop-animation

Play/Pause animation icon

Last updated