Carousel
HTML Snippet
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