arrow_back
View code

<div class="carousel-container" data-position="right">
  <div class="cdt-carousel" data-carousel-type="fade" data-opacity-duration="2000" data-slide-delay="7000" data-auto-slide="true">
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
  </div>
  <div class="thumbnails">
    <div class="thumbnails-holder">
      <div class="thumbs-container">
        <div class="thumb selected">
          <img src="/static/images/1a.jpg" alt="">
        </div>
        <div class="thumb">
          <img src="/static/images/2a.jpg" alt="">
        </div>
        <div class="thumb">
          <img src="/static/images/3a.jpg" alt="">
        </div>
        <div class="thumb">
          <img src="/static/images/4a.jpg" alt="">
        </div>
        <div class="thumb">
          <img src="/static/images/5a.jpg" alt="">
        </div>
        <div class="thumb">
          <img src="/static/images/6a.jpg" alt="">
        </div>
        <div class="thumb">
          <img src="/static/images/7a.jpg" alt="">
        </div>
        <div class="thumb">
          <img src="/static/images/8a.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</div>
                        
Copy HTML

/*
 * File: _slide-show-with-progressbar.scss
 * Location /src/scss/components
 * Slide show with progressbar component
 */

:root {
    --carousel-height: 600px;
    --carousel-arrow-color: var(--color-bg);
    --carousel-dot-color: var(--color-bg);
}
@media screen and (max-width: 768px) {
    :root {
        --carousel-height: 300px;
    }
}



.carousel-container {
    width: 60%;
    height: var(--carousel-height);
    margin: 90px auto;
    display: flex;
    flex-direction: column;
    @media screen and (max-width: 768px) {
        width: 90%;
    }
    .cdt-carousel {
        order: 0; // Thumbnails on the bottom
        section {
            background-size: cover;
            background-position: center center;
            &:nth-child(1) {
                background-image: url('/assets/images/1a.jpg');
            }
            
            &:nth-child(2) {
                background-image: url('/assets/images/2a.jpg');
            }
            
            &:nth-child(3) {
                background-image: url('/assets/images/3a.jpg');
            }
            
            &:nth-child(4) {
                background-image: url('/assets/images/4a.jpg');
            }
            
            &:nth-child(5) {
                background-image: url('/assets/images/5a.jpg');
            }
            
            &:nth-child(6) {
                background-image: url('/assets/images/6a.jpg');
            }
            
            &:nth-child(7) {
                background-image: url('/assets/images/7a.jpg');
            }
            
            &:nth-child(8) {
                background-image: url('/assets/images/8a.jpg');
            }
        }
    }
    .thumbnails {
        display: flex;
        .thumbnails-holder {
            padding: 10px 0;
            overflow: hidden;
            .thumbs-container {
                display: inline-flex;
                transition: transform 0.4s;
                .thumb {
                    position: relative;
                    margin-right: 10px;
                    user-select: none;
                    flex: auto;
                    flex-shrink: 0;
                    flex-grow: 0;
                    transition: transform 1s;
                    // &:after {
                    //     content: '';
                    //     width: calc(100% - 16px);
                    //     height: calc(100% - 16px);
                    //     border: 8px solid var(--color-higher);
                    //     top: 0;
                    //     pointer-events: none;
                    //     left: 0;
                    //     position: absolute;
                    //     transition: opacity 0.4s;
                    //     opacity: 0;
                    //     @media screen and (max-width: 768px) {
                    //         border-width: 4px;
                    //         width: calc(100% - 8px);
                    //         height: calc(100% - 8px);
                    //     }
                    //     @media screen and (max-width: 768px) {
                    //         border-width: 4px;
                    //         width: calc(100% - 8px);
                    //         height: calc(100% - 8px);
                    //     }
                    // }
                    &.selected:after {
                        opacity: 1;
                    }
                    &:hover {
                        opacity: 0.9;
                    }
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        display: block;
                        float: left;
                    }
                }
            }
        }
    }
    &[data-position='left'], &[data-position='right'] {
        .thumbnails {
            width: 200px;
            @media screen and (max-width: 768px) {
                width: 90px;
            }
            @media screen and (max-width: 768px) {
                width: 90px;
            }
        }
        .thumb {
            width: 100%;
        }
    }
}
                        
Copy SCSS

/*
 * File: slide-show-with-progressbar.js
 * Location /src/js/components
 * Slide show with progressbar component
*/

const carouselElement = document.querySelector(".cdt-carousel");
const carouselWidthThumb = new CarouselWidthThumb(carouselElement);

const smartProgressbarThumb = new SmartProgressbar({
  color: "var(--primary-color)",
  thickness: 15,
  duration:
    parseInt(
      carouselElement.getAttribute("data-slide-delay") -
        parseInt(carouselElement.getAttribute("data-opacity-duration"))
    ) / 1000
});

function progress(progressContainer, item) {
  progressContainer.setElement(item);
  progressContainer.start();
}
const thumbs = document.querySelectorAll(".carousel-container .thumb");

progress(smartProgressbarThumb, thumbs[0]);

window.addEventListener("thumbSelected", (e) => {
  console.log("now");
  const index = e.detail.index;
  progress(smartProgressbarThumb, thumbs[index]);
});

Copy JS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.