Horizontal Scroll Carousel

horizontal_scroll_carousel.js

import { get_offset, min_max } from 'js/utils';

export default class Horizontal_Scroll_Carousel {

    constructor(container, args = {}){
        this.container = container;
        this.args = args;

        this.animation_speed = args.animation_speed ?? 1000;
        this.scroll_duration = args.scroll_duration ?? 2000;

        this.init();
    }

    init(){
        
        this.current_index = 0;
        
        this.slides_con = this.container.querySelector('.slides')

        this.slides_con.style.display = 'flex';
        this.slides_con.style.position = 'sticky';
        this.slides_con.height = '100vh';
        this.slides_con.style.top = 0;
        this.slides_con.style.transition = `transform ${this.animation_speed}ms ease`;

        this.slides = this.container.querySelectorAll('.slide');
        this.slides.forEach(slide=>{
            slide.style.flexShrink = 0;
            slide.style.width = '100%';
        })
        
        this.update();
        this.init_scroll();
    }

    update(){

        this.offset = get_offset(this.container)
        this.total_height = this.scroll_duration * this.slides.length;
        this.container.style.minHeight = (this.total_height) + 'px';
    }
    
    update_slide(){
        
        const slide_index = Math.floor(this.slides.length * this.scroll_progress);

        if( this.current_index !== slide_index ) {
            this.change_slide(slide_index)
        }
    }

    change_slide(index){

        if( index === this.slides.length ) return;
        
        this.current_index = index;

        const x = document.body.clientWidth * index;
        this.slides_con.style.transform = `translateX(-${x}px)`;
    }
    
    init_scroll(){
        
        const scroll = ()=>{
            this.scroll_progress = (scrollY - this.offset.top) / (this.container.scrollHeight - this.scroll_duration);
            this.scroll_progress = min_max(this.scroll_progress, 0, 1);
            this.update_slide();
        }
        
        document.addEventListener('scroll', scroll, { passive: true });
    }
    
}

utils.js

export function get_offset(element) {
    if (!element.getClientRects().length) {
        return { top: 0, left: 0 };
    }
    let rect = element.getBoundingClientRect();
    let win = element.ownerDocument.defaultView;
    return ({
        top: rect.top + win.pageYOffset,
        left: rect.left + win.pageXOffset
    });   
}

export function min_max(value, min, max) {
    if( value < min ) return min;
    if( value > max ) return max;
    return value;
}