Horizontal Scroll no jQuery

by Marco Abate

HTML

<div class="carousel-wrapper">
    <div class="items-wrap images">
        <img data-index='1' src="https://picsum.photos/300/600"/>
        <img data-index='2' src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
        <img src="https://picsum.photos/300/600"/>
    </div>
	<div class="controls">
		<button type="button" class="prev">Prev</button>
		<button type="button" class="next">Next</button>
	</div>
</div>

CSS

html, body {
    margin: 0;
	overflow: hidden;
}
.carousel-wrapper {
    display: inline-block;
    width: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
.carousel-wrapper .items-wrap {
    display: inline-block;
    font-family: empty;
    height: 12.5em;
}
.carousel-wrapper .items-wrap.images {
    height: 12.5em;
}
.carousel-wrapper .items-wrap * {
    display: inline-block;
    width: auto;
    vertical-align: middle;
    font-family: empty;
}
.carousel-wrapper .items-wrap.images img {
    max-height: 100%;
}

@font-face {
    font-family: empty;
    src:...

JavaScript

document.querySelectorAll('img').forEach((e, i) => {
	e.addEventListener('click', () => {
		const bound = e.getBoundingClientRect();
		console.log(bound)
		const scroller = document.querySelector('.carousel-wrapper');
		console.log(scroller)
		scroller.scroll({
			left: bound.left + bound.width,
	        top: 0,
    	    behavior: 'smooth'
		})
	})
})

const prev = document.querySelector(".prev")
const next = document.querySelector(".next")

let currentScroll = 0
prev.addEventListener('click', () => {
	const scroller = document.querySelector('.carousel-wrapper');
	currentScroll = scroller.scrollLeft - 100
	if(currentScroll < 0) currentScroll = 0
	scroller.scroll({
			left: currentScroll,
	        top: 0,
    	    behavior: 'smooth'
		})
})