-1
I have a slide carousel and I need to play this same carousel (only with different images and sections) on the same page. I will make this application for a blog, so there are several categories that will have several posts being "scrolados".
The problem is that this carousel is only working on the first div
, he does not perform in div
s remaining.
Can give me tips on what to do?
I have set up a simple structure here to illustrate what I have done so far:
<style>
body {
margin: 0px;
}
ul {
padding: 0px;
margin: 0px;
list-style: none;
}
img {
display: block;
max-width: 100%;
}
.slide-wrapper {
overflow: hidden;
}
.slide {
display: flex;
}
.slide article {
flex-shrink: 0;
width: 80vw;
max-width: 800px;
margin: 0 20px;
}
</style>
<div class="slide-wrapper">
<div class="slide">
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
</div>
</div>
<div class="slide-wrapper">
<div class="slide">
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
</div>
</div>
<div class="slide-wrapper">
<div class="slide">
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
<article><img src="https://unsplash.com/photos/1U0xyCNniTs" alt=""></article>
</div>
</div>
<script>
class Slide {
constructor(slide, wrapper) {
this.slide = document.querySelector(slide)
this.wrapper = document.querySelector(wrapper);
this.dist = { finalPosition: 0, startX: 0, movement: 0 }
}
moveSlide(distX) {
this.dist.movePosition = distX;
this.slide.style.transform = `translate3d(${distX}px, 0, 0)`;
}
updatePosition(clientX) {
this.dist.movement = (this.dist.startX - clientX) * 1.6;
return this.dist.finalPosition - this.dist.movement;
}
onStart(event) {
let movetype;
if (event.type === 'mousedown') {
this.dist.startX = event.clientX;
movetype = 'mousemove';
} else {
this.dist.startX = event.changedTouches[0].clientX;
movetype = 'touchmove';
}
this.wrapper.addEventListener(movetype, this.onMove);
}
onMove(event) {
const pointerPosition = (event.type === 'mousemove') ? event.clientX : event.changedTouches[0].clientX;
const finalPosition = this.updatePosition(pointerPosition);
this.moveSlide(finalPosition);
}
onEnd(event) {
const movetype = (event.type === 'mouseup') ? 'mousemove' : 'touchmove';
this.wrapper.removeEventListener(movetype, this.onMove);
this.dist.finalPosition = this.dist.movePosition;
}
addSlideEvents() {
this.wrapper.addEventListener('mousedown', this.onStart);
this.wrapper.addEventListener('touchstart', this.onStart);
this.wrapper.addEventListener('mouseup', this.onEnd);
this.wrapper.addEventListener('touchend', this.onEnd);
}
bindEvents() {
this.onStart = this.onStart.bind(this);
this.onMove = this.onMove.bind(this);
this.onEnd = this.onEnd.bind(this);
}
init() {
this.bindEvents();
this.addSlideEvents();
return this;
}
}
const slide = new Slide('.slide', '.slide-wrapper');
slide.init();
</script>