<div class="carousel-container">
  <div class="cdt-carousel">
    <section>New Volvo</section>
    <section>Audi concept</section>
    <section>Bmw</section>
    <section>Corvette</section>
    <div class="controls">
      <span class="arrow left"></span>
      <span class="arrow right"></span>
      <ul>
        <li>
          <span></span>
        </li>
        <li>
          <span></span>
        </li>
        <li>
          <span></span>
        </li>
        <li>
          <span></span>
        </li>
      </ul>
    </div>
  </div>
</div>
                        

/*
 * File: _carousel-v2.scss
 * Location /src/scss/components
 * Carousel v2 component
 */

:root {
            --carousel-height: 500px;
            --carousel-arrow-color: var(--color-bg);
            --carousel-dot-color: var(--color-bg);
        }
        .carousel-container {
            width: 70%;
            height: var(--carousel-height);
            margin: 90px auto;
        }
        @media screen and (max-width: 768px) {
            .carousel-container {
                width: 90%;
            }
            
        }
        section {
            color: var(--color-bg);
            font-size: var(--text-xlg);
            display: flex;
            justify-content: center;
            align-items: center;
            background-size: cover;
            background-position: center center;
        }

        section:nth-child(1) {
            background-image: url('https://assets.volvocars.com/~/media/ccs/homepage/hero_images/sup00066_1440x810.jpg');
        }

        section:nth-child(2) {
            background-image: url('https://www.audi.com/content/dam/gbp2/experience-audi/models-and-technology/concept-cars/aicon/1920x1080-desktop-concept-cars-aicon-2.jpg?imwidth=1920&imdensity=1');
        }

        section:nth-child(3) {
            background-image: url('https://www.bmw.se/content/dam/bmw/common/all-models/2-series/gran-coupe/2019/Inspire-Highligt/bmw-2-series-gran-coupe-inspire-ag-sp-xxl.jpg');
        }

        section:nth-child(4) {
            background-image: url('https://medier.talentum.com/ponIltIpIv-1552560488/media/Nyteknik/wbs7ys-xc40-laddhybrid.jpg/binary/original/xc40-laddhybrid.jpg');
        }
                        

/*
 * File: carousel-v2.js
 * Location /src/js/components
 * Carousel v2 component
*/

const myCarousel = new Kodhus.Carousel();
        myCarousel.init(document.querySelector('.cdt-carousel'));