Carousels are incredibly useful for displaying lots of different kinds of information. The carousel component is designed to handle all the carousel controls and functionality while allowing you to style the slides exactly how you want them to be. The only slide styling that you do not have control of is the width of the slide. This is due to how sliding and pagination works with the underlying carousel library.
To control the width to slide you need to change the swiper options set on the carousel, specifically you need to adjust the slides per view option. As part of the options you can change how many slides per view are visible at various breakpoints.
Setting Options
When using the carousel You will be required to set your own options for how the underlying carousel library should behave. We are using Swiper.js, a full list of options/parameters available here: Swiper.js documentation.
The two most common options you will use:
slidesPerView: Sets How many slides are visible at a time.- To have a slide peak at the end of the row simply set
slidesPerViewto a number with a decimal. For example, setting this option to3.2would have 3 slides fully visible and 2/10 of a forth slide visible at the end.
- To have a slide peak at the end of the row simply set
breakpoints: Allows for setting differnet paramaters based on breakpoints. It is a little more complicated so see the next section for a more detailed explanation.
Breakpoints
Allows to set different parameter for different responsive breakpoints (screen sizes). Not all parameters can be changed in breakpoints, only those which do not required different layout and logic, like slidesPerView, slidesPerGroup, spaceBetween, slidesPerColumn. Such parameters like loop and effect won't work. If you have a paramater that stays the same you don't have to redefine it.
const carousel = document.querySelector("dk-carousel#example-id");
carousel.setOptions({
// Default parameters
slidesPerView: 1,
spaceBetween: 10,
// Responsive breakpoints
breakpoints: {
// when window width is >= 320px
320: {
slidesPerView: 2,
spaceBetween: 20,
},
// when window width is >= 480px
480: {
slidesPerView: 3,
spaceBetween: 30,
},
// when window width is >= 640px
640: {
slidesPerView: 4,
spaceBetween: 40,
},
},
});
// ------ or -----
const carousel = document.querySelector("dk-carousel#example-id");
carousel.setOptions({
slidesPerView: 1,
spaceBetween: 10,
// using "ratio" endpoints
breakpoints: {
"@0.75": {
slidesPerView: 2,
spaceBetween: 20,
},
"@1.00": {
slidesPerView: 3,
spaceBetween: 40,
},
"@1.50": {
slidesPerView: 4,
spaceBetween: 50,
},
},
});
Slots
To make use of a slot, add the slot="NAME" to any kind of element that you want inserted into the slot of the web component. A slot allows you to control the markup and styling of what content you put into it.
<div slot="slot-name">Additional Markup</div>
| Slot | Description |
|---|---|
title | Allows you set the markup for the title of the carousel. |
Properties
Use properties and attributes to control the web component as well as pass required data to it. Some properties won't have an attribute name, this is because to use that property you can't use it as an html attribute it must be set using javascript as a property of the element.
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
allowScroll | allow-scroll | Enables the ability to scrollwheel through the carousel. | boolean | true |
allowStartOver | allow-start-over | Controls if a start over link appears | boolean | true |
btnColor | btn-color | Changes the colors of the nav buttons so they can better match what background they are on top of. | "dark" | "light" | "dark" |
scrollbar | scrollbar | Disables/enables the scrollbar | boolean | true |
showSlideCount | show-slide-count | Shows number of slides | boolean | true |
showTitleLine | show-title-line | Toggles the display of the line under the title. | boolean | true |
slideDescription | slide-description | Used to describe what each slide represents. For example, if each slide represents a product this would be set to "Products". This is used with showSlideCount. | string | "Items" |
startOverText | start-over-text | Sets text of start over button | string | "Start Over" |
swiperOptions | undefined | Pass options to Swiper | SwiperOptions | {slidesPerView: 1,} |
theTitle | title | Allows for setting the text of the title of the carousel. Alternativley you can use the "title" slot. | string | null |
Simple Cards
<dk-carousel
title="Recomended Products"
btn-color="dark"
className="">
<dk-slide-wrapper className="">
<dk-slide className="">
<div class="dk-card card-example">
<div class="img-wrapper">
<img
src="https://picsum.photos/200/100?100"
alt="Alt Tag Text"
class=""
/>
</div>
<div class="content">
<div class="h4">
Slide Title 1
</div>
<div class="my-1">
SLIDE(PRODUCT)
DESCRIPTION
</div>
<div class="dk-text--sm">
Supplier Name
</div>
</div>
<div class="flex justify-end w-full col-span-3">
<dk-button
size="sm"
color="secondary"
className="">
$1.23456
</dk-button>
<dk-button
size="sm"
className="">
Details
</dk-button>
</div>
</div>
</dk-slide>
<dk-slide className="">
<div class="dk-card card-example">
<div class="img-wrapper">
<img
src="https://picsum.photos/200/100?101"
alt="Alt Tag Text"
class=""
/>
</div>
<div class="content">
<div class="h4">
Slide Title 2
</div>
<div class="my-1">
SLIDE(PRODUCT)
DESCRIPTION
</div>
<div class="dk-text--sm">
Supplier Name
</div>
</div>
<div class="flex justify-end w-full col-span-3">
<dk-button
size="sm"
color="secondary"
className="">
$1.23456
</dk-button>
<dk-button
size="sm"
className="">
Details
</dk-button>
</div>
</div>
</dk-slide>
<dk-slide className="">
<div class="dk-card card-example">
<div class="img-wrapper">
<img
src="https://picsum.photos/200/100?102"
alt="Alt Tag Text"
class=""
/>
</div>
<div class="content">
<div class="h4">
Slide Title 3
</div>
<div class="my-1">
SLIDE(PRODUCT)
DESCRIPTION
</div>
<div class="dk-text--sm">
Supplier Name
</div>
</div>
<div class="flex justify-end w-full col-span-3">
<dk-button
size="sm"
color="secondary"
className="">
$1.23456
</dk-button>
<dk-button
size="sm"
className="">
Details
</dk-button>
</div>
</div>
</dk-slide>
<dk-slide className="">
<div class="dk-card card-example">
<div class="img-wrapper">
<img
src="https://picsum.photos/200/100?103"
alt="Alt Tag Text"
class=""
/>
</div>
<div class="content">
<div class="h4">
Slide Title 4
</div>
<div class="my-1">
SLIDE(PRODUCT)
DESCRIPTION
</div>
<div class="dk-text--sm">
Supplier Name
</div>
</div>
<div class="flex justify-end w-full col-span-3">
<dk-button
size="sm"
color="secondary"
className="">
$1.23456
</dk-button>
<dk-button
size="sm"
className="">
Details
</dk-button>
</div>
</div>
</dk-slide>
<dk-slide className="">
<div class="dk-card card-example">
<div class="img-wrapper">
<img
src="https://picsum.photos/200/100?104"
alt="Alt Tag Text"
class=""
/>
</div>
<div class="content">
<div class="h4">
Slide Title 5
</div>
<div class="my-1">
SLIDE(PRODUCT)
DESCRIPTION
</div>
<div class="dk-text--sm">
Supplier Name
</div>
</div>
<div class="flex justify-end w-full col-span-3">
<dk-button
size="sm"
color="secondary"
className="">
$1.23456
</dk-button>
<dk-button
size="sm"
className="">
Details
</dk-button>
</div>
</div>
</dk-slide>
<dk-slide className="">
<div class="dk-card card-example">
<div class="img-wrapper">
<img
src="https://picsum.photos/200/100?105"
alt="Alt Tag Text"
class=""
/>
</div>
<div class="content">
<div class="h4">
Slide Title 6
</div>
<div class="my-1">
SLIDE(PRODUCT)
DESCRIPTION
</div>
<div class="dk-text--sm">
Supplier Name
</div>
</div>
<div class="flex justify-end w-full col-span-3">
<dk-button
size="sm"
color="secondary"
className="">
$1.23456
</dk-button>
<dk-button
size="sm"
className="">
Details
</dk-button>
</div>
</div>
</dk-slide>
</dk-slide-wrapper>
</dk-carousel>Javascript
() => {
const carousel = document.querySelector(`dk-carousel[title="Recomended Products"]`);
carousel.setOptions({
slidesPerView: 1.1,
breakpoints: {
1250: {
slidesPerView: 3.2
},
1000: {
slidesPerView: 2.1
}
}
});
}Simple Card Multi No Title
<p class="">
If you arent using the title inside the
carousel tag you will need an unique ID
added and use that in the script to
setOptions.{' '}
</p>
<dk-carousel
id="no-title"
show-title-line="false"
show-slide-count="false"
allow-start-over="false"
className="">
<dk-slide-wrapper className="">
<dk-slide
style="width:500px"
className="">
<div class="dk-card card-example">
<div class="img-wrapper">
<img
src="https://picsum.photos/200/100?300"
alt="Alt Tag Text"
class=""
/>
</div>
<div class="content">
<div class="h4">
Slide Title 1
</div>
<div class="my-1">
SLIDE(PRODUCT)
DESCRIPTION
</div>
<div class="dk-text--sm">
Supplier Name
</div>
</div>
<div class="flex justify-end w-full col-span-3">
<dk-button
size="sm"
color="secondary"
className="">
$1.23456
</dk-button>
<dk-button
size="sm"
className="">
Details
</dk-button>
</div>
</div>
</dk-slide>
<dk-slide
style="width:500px"
className="">
<div class="dk-card card-example">
<div class="img-wrapper">
<img
src="https://picsum.photos/200/100?301"
alt="Alt Tag Text"
class=""
/>
</div>
<div class="content">
<div class="h4">
Slide Title 2
</div>
<div class="my-1">
SLIDE(PRODUCT)
DESCRIPTION
</div>
<div class="dk-text--sm">
Supplier Name
</div>
</div>
<div class="flex justify-end w-full col-span-3">
<dk-button
size="sm"
color="secondary"
className="">
$1.23456
</dk-button>
<dk-button
size="sm"
className="">
Details
</dk-button>
</div>
</div>
</dk-slide>
<dk-slide
style="width:500px"
className="">
<div class="dk-card card-example">
<div class="img-wrapper">
<img
src="https://picsum.photos/200/100?302"
alt="Alt Tag Text"
class=""
/>
</div>
<div class="content">
<div class="h4">
Slide Title 3
</div>
<div class="my-1">
SLIDE(PRODUCT)
DESCRIPTION
</div>
<div class="dk-text--sm">
Supplier Name
</div>
</div>
<div class="flex justify-end w-full col-span-3">
<dk-button
size="sm"
color="secondary"
className="">
$1.23456
</dk-button>
<dk-button
size="sm"
className="">
Details
</dk-button>
</div>
</div>
</dk-slide>
<dk-slide
style="width:500px"
className="">
<div class="dk-card card-example">
<div class="img-wrapper">
<img
src="https://picsum.photos/200/100?303"
alt="Alt Tag Text"
class=""
/>
</div>
<div class="content">
<div class="h4">
Slide Title 4
</div>
<div class="my-1">
SLIDE(PRODUCT)
DESCRIPTION
</div>
<div class="dk-text--sm">
Supplier Name
</div>
</div>
<div class="flex justify-end w-full col-span-3">
<dk-button
size="sm"
color="secondary"
className="">
$1.23456
</dk-button>
<dk-button
size="sm"
className="">
Details
</dk-button>
</div>
</div>
</dk-slide>
<dk-slide
style="width:500px"
className="">
<div class="dk-card card-example">
<div class="img-wrapper">
<img
src="https://picsum.photos/200/100?304"
alt="Alt Tag Text"
class=""
/>
</div>
<div class="content">
<div class="h4">
Slide Title 5
</div>
<div class="my-1">
SLIDE(PRODUCT)
DESCRIPTION
</div>
<div class="dk-text--sm">
Supplier Name
</div>
</div>
<div class="flex justify-end w-full col-span-3">
<dk-button
size="sm"
color="secondary"
className="">
$1.23456
</dk-button>
<dk-button
size="sm"
className="">
Details
</dk-button>
</div>
</div>
</dk-slide>
<dk-slide
style="width:500px"
className="">
<div class="dk-card card-example">
<div class="img-wrapper">
<img
src="https://picsum.photos/200/100?305"
alt="Alt Tag Text"
class=""
/>
</div>
<div class="content">
<div class="h4">
Slide Title 6
</div>
<div class="my-1">
SLIDE(PRODUCT)
DESCRIPTION
</div>
<div class="dk-text--sm">
Supplier Name
</div>
</div>
<div class="flex justify-end w-full col-span-3">
<dk-button
size="sm"
color="secondary"
className="">
$1.23456
</dk-button>
<dk-button
size="sm"
className="">
Details
</dk-button>
</div>
</div>
</dk-slide>
</dk-slide-wrapper>
</dk-carousel>Javascript
() => {
const carousel = document.querySelector(`dk-carousel#no-title`);
carousel.swiperOptions = {
slidesPerView: 1,
breakpoints: {
800: {
slidesPerView: 3
}
}
};
}