Note: The JS file for all carousels is an addon to the main global.js file. Make sure that you have both the global and carousel addon file loaded. The order is important and the addon file must come after the global.js file.
To create a carousel create a parent div with the classname of dk-carousel and inside add a div per slide with the classname dk-slide.
Once the DOM has loaded call the dk.carousel(); function. This function will initialize all of the carousels on the page.
Settings
The carousel comes with default settings out of the box. You are able to override these defaults by passing an object as an argument with the settings you wish to override. Under the hood the dkCarousel() makes use of Swiper, go to the api documentation (Swiper link) of this library to see all available settings. It is possible to also make changes at certain breakpoints. Please refer to the Swiper documentation for how to make use of breakpoints.
dk.carousel({ slidesPerView: 5, initialSlide: 3 });
Common options
There are many more options that can be set please refer to the Swiper Docs.
| option | default | description |
|---|---|---|
| randomStart | false | Set this option to true and the carousel will start on a random slide |
| slidesPerView | 1 | Use this to set how many slides are viewed at one time. |
| slidesPerGroup | 1 | Set this value to the number of slides that you want grouped together and represeneted by one dot below the carousel. When the next or previous button is hit it will go to the whole group. |
| autoPlay | false | Link to autoplay docs |
| initialSlide | 0 | Set this value to the index number of the slide that you want to start on. |
| centeredSlides | true | Controls if the active slide is centered when there are multiple slides per view. |
| spaceBetween | 15 | Sets how many pixels of space are between each slide. |
Target Specific Carousels
If you want to target individual carousels on a page and give them different settings you must pass the selector of the carousels you wish to target as a (string|Element|NodeList) in the first argument of the function. Then pass a settings object as the second argument.
dk.carousel(".carouselSelector", { slidesPerView: 10, spaceBetween: 40, randomStart: true });
Note: To keep file size down only the used components have been imported; the following components have been imported: Navigation, Pagination, Accessibility and Autoplay
Image
<div class="">
<div class="dk-carousel">
<div class="dk-slide">
<img
src="https://source.unsplash.com/random?sig=0collection=145698"
alt="theThing"
class=""
/>
</div>
<div class="dk-slide">
<img
src="https://source.unsplash.com/random?sig=1collection=145698"
alt="theThing"
class=""
/>
</div>
<div class="dk-slide">
<img
src="https://source.unsplash.com/random?sig=2collection=145698"
alt="theThing"
class=""
/>
</div>
<div class="dk-slide">
<img
src="https://source.unsplash.com/random?sig=3collection=145698"
alt="theThing"
class=""
/>
</div>
<div class="dk-slide">
<img
src="https://source.unsplash.com/random?sig=4collection=145698"
alt="theThing"
class=""
/>
</div>
<div class="dk-slide">
<img
src="https://source.unsplash.com/random?sig=5collection=145698"
alt="theThing"
class=""
/>
</div>
<div class="dk-slide">
<img
src="https://source.unsplash.com/random?sig=6collection=145698"
alt="theThing"
class=""
/>
</div>
<div class="dk-slide">
<img
src="https://source.unsplash.com/random?sig=7collection=145698"
alt="theThing"
class=""
/>
</div>
<div class="dk-slide">
<img
src="https://source.unsplash.com/random?sig=8collection=145698"
alt="theThing"
class=""
/>
</div>
<div class="dk-slide">
<img
src="https://source.unsplash.com/random?sig=9collection=145698"
alt="theThing"
class=""
/>
</div>
</div>
</div>Javascript
dk => {
dk.carousel();
}