darmentrout/simple-carousel

## simple-carousel
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Carousel</title>
    <style>
        * { box-sizing: border-box; }
        #sliderContainer {
            width: 80%;
            max-width: 1000px;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
            border: 1px solid fuchsia;
        }
        #sliderNav {
            position: absolute;
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 2;
        }
        #sliderNav button {
            border: 1px solid blue;
            color: blue;
            background: transparent;
            border-radius: 100%;
            width: 2em;
            height: 2em;
            cursor: pointer;
        }
        #sliderNav button p {
            width: 0px;
            height: 0px;
            overflow: hidden;
            position: absolute;
            z-index: -1;
        }
        #slider {
            height: 60px;
            width: 200%;
            position: relative;
            overflow: hidden;
            left: -20%;
        }
        #slider span {
            width: 10%;
            text-align: center;
            height: 60px;
            float: left;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .expand {
            animation-duration: 1s;
            animation-name: expand;
        }
        @keyframes expand {
            from {
                width: 0px;
            }
            to {
                width: 10%;
            }
        }
        .shrink {
            animation-duration: 1s;
            animation-name: shrink;
        }
        @keyframes shrink {
            from {
                width: 10%;
            }
            to {
                width: 0px;
            }
        }
    </style>
</head>
<body>
    <div id="sliderContainer">
        <nav id="sliderNav">
            <button id="left">&#10094;<p>slide left</p></button>
            <button id="right">&#10095;<p>slide right</p></button>
        </nav>
        <div id="slider">
            <span>0</span>
            <span style="background: #ddd;">1</span>
            <span>2</span>
            <span style="background: #ddd;">3</span>
            <span>4</span>
            <span style="background: #ddd;">5</span>
            <span>6</span>
            <span style="background: #ddd;">7</span>
            <span>8</span>
            <span style="background: #ddd;">9</span>
        </div>
    </div>

<script>
    document.getElementById('left').addEventListener('click', () => {
        const slider = document.querySelector('#slider');
        const firstItem = slider.children[0];

        firstItem.classList.add('shrink');

        const slideleft = () => {
            slider.append(firstItem);
            firstItem.classList.remove('shrink');
            firstItem.removeEventListener('animationend', slideleft);
        }
        firstItem.addEventListener('animationend', slideleft);
    });

    document.getElementById('right').addEventListener('click', () => {
        const slider = document.querySelector('#slider');
        const lastItem = slider.children[slider.children.length - 1];

        slider.prepend(lastItem);
        lastItem.classList.add('expand');

        const slideright = () => {
            lastItem.removeEventListener('animationend', slideright);
            lastItem.classList.remove('expand');
        }
        lastItem.addEventListener('animationend', slideright);
    });
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Simple Carousel</title>
	<style>
	* { box-sizing: border-box; }
	#sliderContainer {
	width: 80%;
	max-width: 1000px;
	margin: 50px auto;
	overflow: hidden;
	position: relative;
	border: 1px solid fuchsia;
	}
	#sliderNav {
	position: absolute;
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 2;
	}
	#sliderNav button {
	border: 1px solid blue;
	color: blue;
	background: transparent;
	border-radius: 100%;
	width: 2em;
	height: 2em;
	cursor: pointer;
	}
	#sliderNav button p {
	width: 0px;
	height: 0px;
	overflow: hidden;
	position: absolute;
	z-index: -1;
	}
	#slider {
	height: 60px;
	width: 200%;
	position: relative;
	overflow: hidden;
	left: -20%;
	}
	#slider span {
	width: 10%;
	text-align: center;
	height: 60px;
	float: left;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	.expand {
	animation-duration: 1s;
	animation-name: expand;
	}
	@keyframes expand {
	from {
	width: 0px;
	}
	to {
	width: 10%;
	}
	}
	.shrink {
	animation-duration: 1s;
	animation-name: shrink;
	}
	@keyframes shrink {
	from {
	width: 10%;
	}
	to {
	width: 0px;
	}
	}
	</style>
	</head>
	<body>
	<div id="sliderContainer">
	<nav id="sliderNav">
	<button id="left">❮<p>slide left</p></button>
	<button id="right">❯<p>slide right</p></button>
	</nav>
	<div id="slider">
	<span>0</span>
	<span style="background: #ddd;">1</span>
	<span>2</span>
	<span style="background: #ddd;">3</span>
	<span>4</span>
	<span style="background: #ddd;">5</span>
	<span>6</span>
	<span style="background: #ddd;">7</span>
	<span>8</span>
	<span style="background: #ddd;">9</span>
	</div>
	</div>

	<script>
	document.getElementById('left').addEventListener('click', () => {
	const slider = document.querySelector('#slider');
	const firstItem = slider.children[0];

	firstItem.classList.add('shrink');

	const slideleft = () => {
	slider.append(firstItem);
	firstItem.classList.remove('shrink');
	firstItem.removeEventListener('animationend', slideleft);
	}
	firstItem.addEventListener('animationend', slideleft);
	});

	document.getElementById('right').addEventListener('click', () => {
	const slider = document.querySelector('#slider');
	const lastItem = slider.children[slider.children.length - 1];

	slider.prepend(lastItem);
	lastItem.classList.add('expand');

	const slideright = () => {
	lastItem.removeEventListener('animationend', slideright);
	lastItem.classList.remove('expand');
	}
	lastItem.addEventListener('animationend', slideright);
	});
	</script>

	</body>
	</html>