Me gustaría crear este slider de contenido usando solo JavaScript para que se pueda usar la veces que uno desea en la misma página sin tener que copiar otra vez todo el JS renombrando los nombres de los id etc., pero ando perdido. Si se usa id debería crear otra vez todo el JS si deseo añadir más sliders y lo que no deseo, imaginamos que serian 4 sliders sería mucho código.
Ejemplo:
// Caja padre
const wrapper_slider = document.querySelector('#slider-1');
// items
const item = document.querySelectorAll('#slider-items-1');
// Botones netx/prev
const prev = document.getElementById('row-left');
const next = document.getElementById('row-right');
// Constante con numero total de items a mostrar
const total_items = item.length
// Iniciamos indice
let current_row = 4
// Funcion mostrar/ocultar botones
SliderVisibilityNext()
SliderVisibilityPrev()
// Reset cuando se recarga el navegador (F5)
wrapper_slider.scrollLeft -= wrapper_slider.offsetWidth;
// Evento boton next
next.addEventListener('click', () => {
wrapper_slider.scrollLeft += wrapper_slider.offsetWidth;
// Actualizamos indice + 4
current_row += 4
// Funciones next/prev
SliderVisibilityNext()
SliderVisibilityPrev()
});
// Evento boton previous
prev.addEventListener('click', () => {
wrapper_slider.scrollLeft -= wrapper_slider.offsetWidth;
// Actualizamos indice - 4
current_row -= 4
// Funciones next/prev
SliderVisibilityNext()
SliderVisibilityPrev()
});
// Mostrar / ocultar botones (prev/next)
function SliderVisibilityPrev() {
prev.style.display = current_row <= 4 ? 'none' : 'block'
}
function SliderVisibilityNext() {
next.style.display = current_row >= total_items ? 'none' : 'block'
}
// Caja padre 2
const wrapper_slider2 = document.querySelector('#slider-2');
// Contenido items 2
const item2 = document.querySelectorAll('#slider-items-2');
// Botones netx/prev
const prev2 = document.getElementById('row-left2');
const next2 = document.getElementById('row-right2');
// Constante con numero total de items a mostrar
const total_items2 = item2.length
// Iniciamos indice
let current_row2 = 4
// Funcion mostrar/ocultar botones
SliderVisibilityNext2()
SliderVisibilityPrev2()
// Reset cuando se recarga el navegador (F5)
wrapper_slider2.scrollLeft -= wrapper_slider2.offsetWidth;
// Evento boton next
next2.addEventListener('click', () => {
wrapper_slider2.scrollLeft += wrapper_slider2.offsetWidth;
// Actualizamos indice + 4
current_row2 += 4
// Funciones next/prev
SliderVisibilityNext2()
SliderVisibilityPrev2()
});
// Evento boton previous
prev2.addEventListener('click', () => {
wrapper_slider2.scrollLeft -= wrapper_slider2.offsetWidth;
// Actualizamos indice - 4
current_row2 -= 4
// Funciones next/prev
SliderVisibilityNext2()
SliderVisibilityPrev2()
});
// Mostrar / ocultar botones (prev/next)
function SliderVisibilityPrev2() {
// se comprueba que
prev2.style.display = current_row2 <= 4 ? 'none' : 'block'
}
function SliderVisibilityNext2() {
next2.style.display = current_row2 >= total_items2 ? 'none' : 'block'
}
.slider {
width: 100%;
max-width: 1240px;
padding: 20px 0;
overflow: hidden;
scroll-behavior: smooth;
}
.slider-inner {
display: flex;
flex-wrap: nowrap;
gap: 10px;
}
.slider-items {
height: 300px;
min-width: 300px;
max-width: 300px;
height: 500px;
border: 1px solid tomato;
padding: 10px;
}
<article class="items-famous inner">
<h2>Ultimo en Ropa</h2>
<div id="slider-1" class="slider">
<div class="slider-inner">
<div id='slider-items-1' class="slider-items">
1
</div>
<div id='slider-items-1' class="slider-items">
2
</div>
<div id='slider-items-1' class="slider-items">
3
</div>
<div id='slider-items-1' class="slider-items">
4
</div>
<div id='slider-items-1' class="slider-items">
5
</div>
<div id='slider-items-1' class="slider-items">
6
</div>
<div id='slider-items-1' class="slider-items">
7
</div>
<div id='slider-items-1' class="slider-items">
8
</div>
</div>
</div>
<button role="button" id="row-right" class="row-right">next</button>
<button role="button" id="row-left" class="row-left">prev</button>
</article>
<article class="items-famous inner">
<h2>Ultimo en Calzado</h2>
<div id="slider-2" class="slider">
<div class="slider-inner">
<div id='slider-items-2' class="slider-items">
1
</div>
<div id='slider-items-2' class="slider-items">
2
</div>
<div id='slider-items-2' class="slider-items">
3
</div>
<div id='slider-items-2' class="slider-items">
4
</div>
<div id='slider-items-2' class="slider-items">
5
</div>
<div id='slider-items-2' class="slider-items">
6
</div>
<div id='slider-items-2' class="slider-items">
7
</div>
<div id='slider-items-2' class="slider-items">
8
</div>
</div>
</div>
<button role="button" id="row-right2" class="row-right">next</button>
<button role="button" id="row-left2" class="row-left">prev</button>
</article>
Estoy probando con class='x-slider'
class="slider-items"
envede id y a los botones darle un data-wrapper='x-slider'
y data-items='x-items'
<button role="button" data-wrapper='slider' data-item='slider-items' class="next"><i class="fas fa-angle-right"></i></button>
<button role="button" data-wrapper='slider' data-item='slider-items' class="prev"><i class="fas fa-angle-left"></i></button>
Y en el JS algo como:
// Botones netx/prev
const prev = document.querySelectorAll('.prev');
const next = document.querySelectorAll('.next');
// Recorremos boton para obtener sus datos en el evento.
next.forEach(function (item) {
// Evento onclick
item.addEventListener('click', function (e) {
const wrapper_slider = document.querySelector('.'+item.dataset.wrapper);
// Contenido cursos
const item = document.querySelectorAll('.'+item.dataset.item);
const total_items = item.length
wrapper_slider.scrollLeft += wrapper_slider.offsetWidth;
// Actualizamos indice + 4
current_row +=4
// Funciones next/prev
SliderVisibilityNext()
SliderVisibilityPrev()
// Mostrar / ocultar botones (prev/next)
function SliderVisibilityPrev() {
// se comprueba que
prev.style.display = current_row <= 4 ? 'none' : 'block'
}
function SliderVisibilityNext() {
next.style.display = current_row >= total_items ? 'none' : 'block'
}
})
})
function Next() {
prev.style.display = 'none'
}
function Next() {
next.style.display = 'block'
}
Pero no hace nada y estoy perdido, no se me ocurre alguna lógica para poder hacerlo, ¿Alguien sabe alguna forma?