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 |
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