Carousel | Vanilla

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. Note: To keep file size down only the following components have been imported: Navigation, Pagination, Accessibility and Autoplay

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 });

Image

<div class="image-carousel">
        <div class="dk-carousel">
            <div class="dk-slide">
                <img
                    src="https://picsum.photos/1000/400?0"
                    alt="Alt Tag Text"
                    class=""
                />
            </div>
            <div class="dk-slide">
                <img
                    src="https://picsum.photos/1000/400?1"
                    alt="Alt Tag Text"
                    class=""
                />
            </div>
            <div class="dk-slide">
                <img
                    src="https://picsum.photos/1000/400?2"
                    alt="Alt Tag Text"
                    class=""
                />
            </div>
            <div class="dk-slide">
                <img
                    src="https://picsum.photos/1000/400?3"
                    alt="Alt Tag Text"
                    class=""
                />
            </div>
            <div class="dk-slide">
                <img
                    src="https://picsum.photos/1000/400?4"
                    alt="Alt Tag Text"
                    class=""
                />
            </div>
            <div class="dk-slide">
                <img
                    src="https://picsum.photos/1000/400?5"
                    alt="Alt Tag Text"
                    class=""
                />
            </div>
        </div>
    </div>

Javascript

dk => {
    dk.carousel('.image-carousel .dk-carousel', {
      spaceBetween: 8,
      pagination: {
        el: '.swiper-pagination',
        type: 'bullets'
      }
    });
  }