Cards slider

Caast Cards slider is an easy way to display all your replays when you decide to order them by categoris. It is the recommended way.

Settings

You can configure how much cards should be displayed per row, default is 3. You can also decide to not preview the video while the cursor is hovering the card.

Styling

/*
* -----------------------------------
* Style for Caast Cards Slider
* -----------------------------------
*/

/*
* A set of css variable used to customize the landing,
* the values came from our configuration but you can overwrite them locally
*/
:root {
  --caast-button-background;
  --caast-button-background-darken;
  --caast-button-color;
  --caast-button-ring;
  --caast-is-live-color;
  --caast-share-button-copy-background;
  --caast-share-button-copy-background-darken;
  --caast-share-button-copy-background-success;
  --caast-share-button-copy-color;
  --caast-share-color;
  --caast-card-width;
}
/*
*   Wrapper for injected content
*/
.caast-item[data-caast-type="cards_slider"] {
}
/*
*   Wrapper for header
*/
.caast-listing__header {
}
/*
*   Class for header title
*/
.caast-listing__header-title {
}
/*
*   Class for header total
*/
.caast-listing__header-count {
}
/*
*   Wrapper for live card
*/
.caast-card {
}
/*
*   Wrapper for card player
*/
.caast-card__player {
}
/*
*   Class for card image
*/
.caast-card__image {
}
/*
*   Wrapper for live card content
*/
.caast-card__content {
}
/*
*   Class for led visual indicator
*/
.caast-card__indicator {
}
/*
*   Class added to .caast-card__indicator for replay variation
*/
.caast-card__indicator--replay {
}
/*
*   Class added to .caast-card__indicator for soon variation
*/
.caast-card__indicator--soon {
}
/*
*   Class for fullscreen toggler
*/
.caast-card__fullscreen {
}
/*
*   Class for badge containing date or countdown
*/
.caast-card__badge {
}
/*
*   Class added to .caast-card__badge for planned variation
*/
.caast-card__badge--planned {
}
/*
*   Class added to .caast-card__badge for soon variation
*/
.caast-card__badge--soon {
}
/*
*   Class added to .caast-card__badge for live variation
*/
.caast-card__badge--live {
}


/*
*   Class for collection slider arrows
*/
.caast-slider__arrow {
}
/*
*   Class for collection slider arrows position
*/
.caast-slider__arrow-next,
.caast-slider__arrow-prev {
}
/*
*   Class for collection slider arrow disabled state
*/
.caast-slider__arrow[aria-disabled='true']{
}
/*
*   Wrapper for slider container
*/
.caast-slider__container {
}
/*
*   Class for slider when using native scroll on mobile
*/
.caast-slider__container-native {
}
/*
*   Wrapper for slider
*/
.caast-slider {
}
/*
*   Wrapper for slider inner content
*/
.caast-slider__track {
}
/*
*   Class for slider slide
*/
.caast-slider__slide {
}