Shorts Carousel

Caast Shorts Carousel is an experience allowing you, to render a collections of contents in a TikTok way. You can customize every displayed medias and also extract some shorts from your existing contents. Just sit and let your users enjoy the all-in-one Caast shorts experience.

Settings

You can configure the width of each cards and the gap between them. You can also decide to not preview the video while the cursor is hovering the card.

Styling

Caast Shorts Carousel is totally stylable via your own style declaration. You have the possibility to add styles override on the targeted page inside a classic <style> tag. You can also give us the style override, it will be directly merged with the final render, this option allow you to avoid editing your own page and rely totally on Caast

/*
* -----------------------------------
* Style for Caast Shorts Carousel
* -----------------------------------
*/

/*
* A set of css variable used to customize the collection,
* the values came from our configuration but you can overwrite them locally
*/
:root {
  --caast-button-background;
  --caast-button-background-darken;
  --caast-button-color;
  --caast-collection-card-width;
  --caast-collection-card-gap;
}

/*
*   Wrapper for injected content
*/
.caast-item[data-caast-type="shorts_carousel"] {
}
/*
*   Class for collection title
*/
.caast-collection__title {
}
/*
*   Wrapper for collection slider
*/
.caast-collection__slider {
}
/*
*   Wrapper for collection slider item
*/
.caast-collection__item {}
/*
*   Wrapper for collection slider item body
*/
.caast-collection__item-body {
}
/*
*   Class for collection slider item name
*/
.caast-collection__item-name {
}
/*
*   Class for collection slider item image
*/
.caast-collection__item-image {
}
/*
*   Wrapper for collection slider item product
*/
.caast-collection__item-product {
}
/*
*   Class for collection slider item product image
*/
.caast-collection__item-product-image {
}


/*
*   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 {
}