-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 divs 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>