sokcuri/carousel.html

## carousel.html
<html>
    <head>
        <script src="script.js"></script>
        <link rel="stylesheet" href="style.css"></link>
    </head>
    <body>
        <div class="container">
            <div class="viewport">
                <div class="box" id="pane1"></div>
                <div class="box" id="pane2"></div>
                <div class="box" id="pane3"><div></div></div>
            </div>
            <div class="button">
                <button id="left">left</button>
                <button id="right">right</button>
            </div>
        </div>
    </body>
</html>

## script.js
class Carousel {
    constructor() {
        this.currentIndex = 0;
        this.data = [];
    }

    get now() {
        return this.currentIndex;
    }

    add(d) {
        this.data.push(d);
    }

    fetch(n, truncate = true) {
        let index = this.currentIndex;
        //n = n % this.data.length;

        if (truncate && index + n > this.data.length)
            n = this.data.length - index;

        for (let i = 0; i < n; i++) {
            console.log(this.data[(index + i) % this.data.length])
        }
        this.currentIndex = (this.currentIndex + n) % this.data.length;
    }
}
carousel = new Carousel();
for (let x of [1,2,3,4,5,6]) {
    carousel.add(x);
}

function getLeftPane() {
    return document.querySelector('.container').children[0];
}

function getRightPane() {
    return document.querySelector('.container').children[2];
}

class Pane {
    constructor(preference) {
        this.container = preference.container;
        this.container.setAttribute('style', `--slider-width: ${preference.sliderWidth}`);
        this.viewport = this.container.querySelector('.viewport');
        this.registerEvents();
    }

    registerEvents() {
        this.viewport.addEventListener('transitionend', this.transitionEndEvtHandler.bind(this));
    }
    transitionEndEvtHandler(event) {
        if (this.direction === 'prev') {
            this.direction = null;
            this.viewport.insertBefore(this.nextElement, this.prevElement)
        }
        else if (this.direction === 'next') {
            this.direction = null;
            this.viewport.appendChild(this.prevElement);
        }
    }

    get prevElement() {
        return this.viewport.firstElementChild;
    }

    get nextElement() {
        return this.viewport.lastElementChild;
    }

    get transition() {
        return this._transition || false;
    }
    set transition(bool) {
        this.viewport.classList[(bool ? 'remove' : 'add')]('noTransition');
        this._transition = bool;
    }

    get direction() {
        return this._direction || null;
    }
    set direction(value) {
        let className = ((this._direction || value) === 'prev' ? 'slideLeft' : 'slideRight');
        if (value === null) {
            this.transition = false;
            this.viewport.classList.remove(className);
        } else {
            this.transition = true;
            this.viewport.classList.add(className);
        }
        this._direction = value;
    }

    triggerSlide(direction) {
        if (this.transition) return;
        this.direction = direction;
    }

    slidePrev() {
        this.triggerSlide('prev');
    }

    slideNext() {
        this.triggerSlide('next');
    }
}

function registerEvents() {
    document.querySelector('#left').addEventListener('click', pane.slidePrev.bind(pane))
    document.querySelector('#right').addEventListener('click', pane.slideNext.bind(pane))
}

document.addEventListener('DOMContentLoaded', () => {
    window.pane = new Pane({
        container: document.querySelector('.container'),
        sliderWidth: '600px'
    });
    registerEvents();
});

## style.css
.box {
    background: linear-gradient(to right, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%);
    width: var(--slider-width);
    height: 200px;
    float: left;
    transition: .5s;
    position: relative;
}
#pane1 {
    background: blue;
}

#pane2 {
    background: orangered;
}

.container {
    width: var(--slider-width);
    overflow: hidden;
}

.viewport {
    margin-left: calc(var(--slider-width) * -1);
    display: -webkit-inline-box;
    transition: .5s;
}

.slideLeft {
    margin-left: 0px;
}

.slideRight {
    margin-left: calc(var(--slider-width) * -2);
}

.widthX0 {
    width: 0;
}

.widthX2 {
    width: 100;
    /*transition: none;*/
}

.noTransition {
    transition: none;
}

.button button {
    margin-top: 10px;
    border: 1px solid #aaa;
    background: white;
    font-size: 1.2rem;
    padding: 6px;
}

.button button:hover {
    background: #eee;
    transition: .5s;
}

.button button:focus {
    outline: 0;
    border: 1px solid #739;
}
	<html>
	<head>
	<script src="script.js"></script>
	<link rel="stylesheet" href="style.css"></link>
	</head>
	<body>
	<div class="container">
	<div class="viewport">
	<div class="box" id="pane1"></div>
	<div class="box" id="pane2"></div>
	<div class="box" id="pane3"><div></div></div>
	</div>
	<div class="button">
	<button id="left">left</button>
	<button id="right">right</button>
	</div>
	</div>
	</body>
	</html>
	class Carousel {
	constructor() {
	this.currentIndex = 0;
	this.data = [];
	}

	get now() {
	return this.currentIndex;
	}

	add(d) {
	this.data.push(d);
	}

	fetch(n, truncate = true) {
	let index = this.currentIndex;
	//n = n % this.data.length;

	if (truncate && index + n > this.data.length)
	n = this.data.length - index;

	for (let i = 0; i < n; i++) {
	console.log(this.data[(index + i) % this.data.length])
	}
	this.currentIndex = (this.currentIndex + n) % this.data.length;
	}
	}
	carousel = new Carousel();
	for (let x of [1,2,3,4,5,6]) {
	carousel.add(x);
	}

	function getLeftPane() {
	return document.querySelector('.container').children[0];
	}

	function getRightPane() {
	return document.querySelector('.container').children[2];
	}

	class Pane {
	constructor(preference) {
	this.container = preference.container;
	this.container.setAttribute('style', `--slider-width: ${preference.sliderWidth}`);
	this.viewport = this.container.querySelector('.viewport');
	this.registerEvents();
	}

	registerEvents() {
	this.viewport.addEventListener('transitionend', this.transitionEndEvtHandler.bind(this));
	}
	transitionEndEvtHandler(event) {
	if (this.direction === 'prev') {
	this.direction = null;
	this.viewport.insertBefore(this.nextElement, this.prevElement)
	}
	else if (this.direction === 'next') {
	this.direction = null;
	this.viewport.appendChild(this.prevElement);
	}
	}

	get prevElement() {
	return this.viewport.firstElementChild;
	}

	get nextElement() {
	return this.viewport.lastElementChild;
	}

	get transition() {
	return this._transition \|\| false;
	}
	set transition(bool) {
	this.viewport.classList[(bool ? 'remove' : 'add')]('noTransition');
	this._transition = bool;
	}

	get direction() {
	return this._direction \|\| null;
	}
	set direction(value) {
	let className = ((this._direction \|\| value) === 'prev' ? 'slideLeft' : 'slideRight');
	if (value === null) {
	this.transition = false;
	this.viewport.classList.remove(className);
	} else {
	this.transition = true;
	this.viewport.classList.add(className);
	}
	this._direction = value;
	}

	triggerSlide(direction) {
	if (this.transition) return;
	this.direction = direction;
	}

	slidePrev() {
	this.triggerSlide('prev');
	}

	slideNext() {
	this.triggerSlide('next');
	}
	}

	function registerEvents() {
	document.querySelector('#left').addEventListener('click', pane.slidePrev.bind(pane))
	document.querySelector('#right').addEventListener('click', pane.slideNext.bind(pane))
	}

	document.addEventListener('DOMContentLoaded', () => {
	window.pane = new Pane({
	container: document.querySelector('.container'),
	sliderWidth: '600px'
	});
	registerEvents();
	});
	.box {
	background: linear-gradient(to right, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%);
	width: var(--slider-width);
	height: 200px;
	float: left;
	transition: .5s;
	position: relative;
	}
	#pane1 {
	background: blue;
	}

	#pane2 {
	background: orangered;
	}

	.container {
	width: var(--slider-width);
	overflow: hidden;
	}

	.viewport {
	margin-left: calc(var(--slider-width) * -1);
	display: -webkit-inline-box;
	transition: .5s;
	}

	.slideLeft {
	margin-left: 0px;
	}

	.slideRight {
	margin-left: calc(var(--slider-width) * -2);
	}

	.widthX0 {
	width: 0;
	}

	.widthX2 {
	width: 100;
	/transition: none;/
	}

	.noTransition {
	transition: none;
	}

	.button button {
	margin-top: 10px;
	border: 1px solid #aaa;
	background: white;
	font-size: 1.2rem;
	padding: 6px;
	}

	.button button:hover {
	background: #eee;
	transition: .5s;
	}

	.button button:focus {
	outline: 0;
	border: 1px solid #739;
	}