Estoy trabajando en un proyecto en el que tengo dos carouseles juntos y quisiera evitar repetir código y poder reutilizarlo para que las funciones y los elementos del dom seleccionados sean suficientes.
Me gustaría que al tocar cada flecha se mueva su respectivo carousel con el mismo código y cambiando los nombres de clases o algo así. Este es mi código:
const slider = document.querySelector('#slider');
let sliderSection = slider.children;
let sliderSectionLast = sliderSection[sliderSection.length - 1];
const btnLeft = document.querySelectorAll('.slider__btn--left');
const btnRight = document.querySelectorAll('.slider__btn--right');
slider.insertAdjacentElement("afterbegin", sliderSectionLast);
function next() {
let sliderSectionFirst = slider.children[0];
slider.style.marginLeft = "-200%";
slider.style.transition = "all 0.5s";
setTimeout(() => {
slider.style.transition = "none";
slider.insertAdjacentElement('beforeend', sliderSectionFirst);
slider.style.marginLeft = "-100%";
}, 500);
}
function prev() {
let sliderSection = slider.children;
let sliderSectionLast = sliderSection[sliderSection.length - 1];
slider.style.marginLeft = "0";
slider.style.transition = "all 0.5s";
setTimeout(() => {
slider.style.transition = "none";
slider.insertAdjacentElement("afterbegin", sliderSectionLast);
slider.style.marginLeft = "-100%";
}, 500);
}
btnRight.forEach(boton => {
boton.addEventListener("click", function(){
next();
});
});
btnLeft.forEach(boton => {
boton.addEventListener("click", function(){
prev();
});
});
setInterval(() => {
next();
}, 5000);
/* Slider */
.container-slider{
width: 90%;
overflow: hidden;
border: 2px solid #8a008a;
border-radius: .5rem;
box-shadow: 1px 3px 21px 0px rgba(138,0,138,1);
position: relative;
justify-self: center;
}
.slider{
width: 400%;
height: 40rem;
display: flex;
margin-left: -100%;
}
.slider__img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.slider__btn{
position: absolute;
width: 25px;
height: 25px;
background-color: rgba(0, 0, 0, .7);
top: 50%;
transform: translateY(-50%);
font-weight: bold;
text-align: center;
border-radius: 50%;
font-size: 1.6rem;
cursor: pointer;
}
.slider__btn:hover{
background-color: #000;
}
.slider__btn--right{
right: .3rem;
}
.slider__btn--left{
left: .3rem;
}
<main class="contenedor-grande">
<section class="producto">
<div class="container-slider">
<div class="slider" id="slider">
<div class="slider__seccion">
<img src="img/WhatsApp Image 2022-10-31 at 2.43.39 PM.jpeg" alt="" class="slider__img">
</div>
<div class="slider__seccion">
<img src="img/WhatsApp Image 2022-10-31 at 2.43.40 PM.jpeg" alt="" class="slider__img">
</div>
<div class="slider__seccion">
<img src="img/WhatsApp Image 2022-10-31 at 2.43.41 PM (1).jpeg" alt="" class="slider__img">
</div>
<div class="slider__seccion">
<img src="img/WhatsApp Image 2022-10-31 at 2.43.41 PM.jpeg" alt="" class="slider__img">
</div>
</div>
<div class="slider__btn slider__btn--right" id="btn-right">></div>
<div class="slider__btn slider__btn--left" id="btn-left"><</div>
</div>
<div class="container-info">
<h2>Supreme Prime 5%</h2>
<p>Echa un vistazo al Supreme Prime que es un dispositivo de vape desechable con ejuice de nicotina de sal precargada. El dispositivo compacto funciona con una batería integrada de 1300 mAh (no recargable) y viene precargado con 12 ml de su e-juice favorito, que dura efectivamente hasta 3500 vapeadas.</p>
<div class="contenedor-boton">
<select class="custom-select">
<option selected disabled>Sabores disponibles</option>
<option>Purple rain</option>
<option>Rainbow</option>
<option>Blue razz</option>
<option>Orange dream</option>
</select>
<div class="boton">
<button class="cta">
<span class="hover-underline-animation"><a href="">Consultar</a></span>
</svg>
</button>
</div>
</div>
</div>
</section>
<section class="producto">
<div class="container-slider">
<div class="slider" id="slider">
<div class="slider__seccion">
<img src="img/WhatsApp Image 2022-10-31 at 2.43.39 PM.jpeg" alt="" class="slider__img">
</div>
<div class="slider__seccion">
<img src="img/WhatsApp Image 2022-10-31 at 2.43.40 PM.jpeg" alt="" class="slider__img">
</div>
<div class="slider__seccion">
<img src="img/WhatsApp Image 2022-10-31 at 2.43.41 PM (1).jpeg" alt="" class="slider__img">
</div>
<div class="slider__seccion">
<img src="img/WhatsApp Image 2022-10-31 at 2.43.41 PM.jpeg" alt="" class="slider__img">
</div>
</div>
<div class="slider__btn slider__btn--right" id="btn-right2">></div>
<div class="slider__btn slider__btn--left" id="btn-left2"><</div>
</div>
<div class="container-info">
<h2>Supreme Prime 5%</h2>
<p>Echa un vistazo al Supreme Prime que es un dispositivo de vape desechable con ejuice de nicotina de sal precargada. El dispositivo compacto funciona con una batería integrada de 1300 mAh (no recargable) y viene precargado con 12 ml de su e-juice favorito, que dura efectivamente hasta 3500 vapeadas.</p>
<div class="contenedor-boton">
<select class="custom-select">
<option selected disabled>Sabores disponibles</option>
<option>Purple rain</option>
<option>Rainbow</option>
<option>Blue razz</option>
<option>Orange dream</option>
</select>
<div class="boton">
<button class="cta">
<span class="hover-underline-animation"><a href="">Consultar</a></span>
</svg>
</button>
</div>
</div>
</div>
</section>
</main>