arrow_back
View code

<div class="carousel-container" data-position="bottom">
        <div class="cdt-carousel" data-carousel-type="slide" data-transition-duration="500">
            <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: _thumbnail-carousel.scss
 * Location /src/scss/components
 * Thumbnail carousel 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/1.jpg');
            }
            
            &:nth-child(2) {
                background-image: url('/assets/images/2.jpg');
            }
            
            &:nth-child(3) {
                background-image: url('/assets/images/3.jpg');
            }
            
            &:nth-child(4) {
                background-image: url('/assets/images/4.jpg');
            }
            
            &:nth-child(5) {
                background-image: url('/assets/images/5.jpg');
            }
            
            &:nth-child(6) {
                background-image: url('/assets/images/6.jpg');
            }
            
            &:nth-child(7) {
                background-image: url('/assets/images/7.jpg');
            }
            
            &:nth-child(8) {
                background-image: url('/assets/images/8.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: thumbnail-carousel.js
 * Location /src/js/components
 * Thumbnail carousel component
*/

class CarouselWidthThumb {
            constructor(carousel) {
                const myCarousel = new Kodhus.Carousel(this.carousel);
                this.carouselContainer = document.querySelector('.carousel-container');
                this.thumbnailsHolder = this.carouselContainer.querySelector('.thumbnails');
                this.thumbnailsHolderContainer = this.carouselContainer.querySelector('.thumbnails-holder');
                this.thumbnailsContainer = this.carouselContainer.querySelector('.thumbs-container');
                const thumbsContainer = document.querySelector('.thumbs-container');
                var currIndex = 0;
                this.numElements = 6;
                const thumbsCount = thumbsContainer.childElementCount;
                let indexCountToReturn = 0;
                this.thumbsPosition = this.carouselContainer.getAttribute('data-position') != "undefined" ?
                    this.carouselContainer.getAttribute('data-position') : 'bottom'


                if (this.thumbsPosition === 'top' || this.thumbsPosition == 'left') {
                    carousel.style.order = 1;
                }
                if (this.thumbsPosition === 'left' || this.thumbsPosition === 'right') {
                    this.carouselContainer.style.flexDirection = 'row';
                    this.thumbnailsContainer.style.flexWrap = 'wrap';
                    this.thumbnailsHolderContainer.style.padding = '0 10px';
                    this.thumbnailsContainer.querySelectorAll('.thumb').forEach(thumbnail => {
                        thumbnail.style.margin = 0;
                        thumbnail.style.marginBottom = '10px';
                        thumbnail.style.height =
                            `${(this.thumbnailsHolder.offsetHeight / this.numElements) - ((this.numElements - 1) * 10)/this.numElements}px`;
                    });

                }
                
                this.setThumbsWidth();
                document.querySelectorAll('.thumb').forEach((control, index) => {
                    control.addEventListener("click", () => {
                        if (index === myCarousel.selected) return;
                        document.querySelector('.thumb.selected').classList.remove('selected');
                        control.classList.add('selected');
                        myCarousel.runCarousel(index);

                        if (indexCountToReturn > 0 && index === indexCountToReturn) {
                            if (['top', 'bottom'].includes(this.thumbsPosition)) {
                            thumbsContainer.style.transform =
                                `translate(${-1 * (indexCountToReturn - 1) * this.thumbnailsHolder.offsetWidth / this.numElements}px)`;
                            } else {
                                thumbsContainer.style.transform =
                                `translateY(${-1 * (indexCountToReturn - 1) * this.thumbnailsHolder.offsetHeight / this.numElements}px)`;
                            }
                            indexCountToReturn--;
                        }
                        if (index >= this.numElements - 1 & index < thumbsCount - 1 && index >
                            currIndex) {
                                if (['top', 'bottom'].includes(this.thumbsPosition)) {
                                thumbsContainer.style.transform =
                                `translate(${-1 * ((thumbsCount - this.numElements) - (this.numElements - index)) * this.thumbnailsHolder.offsetWidth / this.numElements}px)`;
                                } else {
                                    thumbsContainer.style.transform =
                                `translatey(${-1 * ((thumbsCount - this.numElements) - (this.numElements - index)) * this.thumbnailsHolder.offsetHeight / this.numElements}px)`;
                                }
                            indexCountToReturn++;
                        }
                        currIndex = index;
                    });
                });
                window.addEventListener('resize', () => {
                    this.setThumbsWidth();
                });
                window.addEventListener('selectedIndex', e => {
                    const index = e.detail.index;
                    
                        this.carouselContainer.querySelectorAll('.thumb').forEach((thumb, i) => {
                            if (i === index) {
                                thumb.classList.add('selected');
                            } else {
                                thumb.classList.remove('selected');
                            }
                        });

                        if (indexCountToReturn > 0 && index === indexCountToReturn) {
                            if (['top', 'bottom'].includes(this.thumbsPosition)) {
                            thumbsContainer.style.transform =
                                `translate(${-1 * (indexCountToReturn - 1) * this.thumbnailsHolder.offsetWidth / this.numElements}px)`;
                            } else {
                                thumbsContainer.style.transform =
                                `translateY(${-1 * (indexCountToReturn - 1) * this.thumbnailsHolder.offsetHeight / this.numElements}px)`;
                            }
                            indexCountToReturn--;
                        }
                        if (index >= this.numElements - 1 & index < thumbsCount - 1 && index >
                            currIndex) {
                                if (['top', 'bottom'].includes(this.thumbsPosition)) {
                                thumbsContainer.style.transform =
                                `translate(${-1 * ((thumbsCount - this.numElements) - (this.numElements - index)) * this.thumbnailsHolder.offsetWidth / this.numElements}px)`;
                                } else {
                                    thumbsContainer.style.transform =
                                `translatey(${-1 * ((thumbsCount - this.numElements) - (this.numElements - index)) * this.thumbnailsHolder.offsetHeight / this.numElements}px)`;
                                }
                            indexCountToReturn++;
                        }
                        if (index === 0) {
                            if (['top', 'bottom'].includes(this.thumbsPosition)) {
                                thumbsContainer.style.transform =
                                `translate(0)`;
                                } else {
                                    thumbsContainer.style.transform =
                                `translatey(0)`;
                                }
                        }
                        currIndex = index;
                    
                })

            }
            setThumbsWidth() {
                if (this.thumbsPosition === 'top' || this.thumbsPosition === 'bottom') {
                    document.querySelectorAll('.thumbnails .thumb')
                    .forEach(thumbnail => thumbnail.style.width =
                        `${(this.thumbnailsHolder.offsetWidth / this.numElements) - ((this.numElements - 1) * 10)/this.numElements}px`
                        );
                } else {
                    document.querySelectorAll('.thumbnails .thumb')
                    .forEach(thumbnail => thumbnail.style.height =
                        `${(this.thumbnailsHolder.offsetHeight / this.numElements) - ((this.numElements - 1) * 10)/this.numElements}px`
                        );
                }
                
            }

        }
        const carouselWidthThumb = new CarouselWidthThumb(document.querySelector('.cdt-carousel'));
Copy JS
Upgrade to professional version

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