1

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?

4
  • Podrías basarte en esta respuesta, aunque el CSS es diferente (posición absoluta en lugar de flex), pero debe poder adaptarse.
    – Triby
    Commented el 27 ene. 2022 a las 19:42
  • @Triby gracias, voy a echarle un vistazo y a ver si lo puedo incorporar a mi código, solo una pregunta, se podrían en vede mostrar 1 solo contenido que sean de 4 en 4 como mi ejemplo?
    – D.Bulten
    Commented el 27 ene. 2022 a las 19:55
  • Sí, puedes crear cada contenedor de slider con cuatro elementos internos.
    – Triby
    Commented el 27 ene. 2022 a las 20:15
  • @Triby estoy intentando mostrar 4 div mediante flex y que pase a los siguientes 4 pero no logro configurarlo ya que dejan de funcionar los botones en el JS basado en tu ejemplo, solo me funciona como tu ejemplo de 1 en 1. Lo que deseo es como en mi ejemplo que se carguen 4 divs con contenidos y al dar al next cargue los otros 4 divs, aparte no solo lleva imágenes, también lleva descripción, precio etc.
    – D.Bulten
    Commented el 27 ene. 2022 a las 20:33

1 respuesta 1

3

En esta propuesta se muestran 4 elementos, pero no en la forma que lo estabas intentando, simplemente se ajusta el HTML para que cada diapositiva tenga los 4 contenedores deseados en el formato que quieres (flex).

Los cambios realizados respecto a la respuesta sugerida son solo HTML (contenido) y CSS, revisa los comentarios.

const absSlider = function() {
    // Función para mostrar siguiente elemento
    // * action == 1 avanza
    // * action == -1 retrocede
    this.show = (sl, action) => {
        // Solo si es automático
        if(!sl.manual) {
            // Limpiar temporizador para evitar comportamiento no deseado
            clearTimeout(sl.timer);
        }
        // Calcular siguiente movimiento
        let next = sl.index + action;
        // Permitir reproducción infinita
        if(next < 0) {
            next = sl.items.length - 1;
        } else if(next >= sl.items.length) {
            next = 0;
        }
        // ¿Actual sale hacia la izquierda o a la derecha?
        let class1 = (action == 1) ? 'abs-to-left' : 'abs-to-right';
        // ¿Siguiente entra desde izquierda o derecha?
        let class2 = (action == 1) ? 'abs-from-right' : 'abs-from-left';
        // Mover actual y ocultar
        sl.items[sl.index].style.animation = `${class1} ${sl.timing} forwards 0s 1`;
        // Mover siguiente y mostrar
        sl.items[next].style.animation = `${class2} ${sl.timing} forwards 0s 1`;
        // Actualizar índice de elemento actual
        sl.index = next;
        if(!sl.manual) {
            // Avanzar solo si es automático
            sl.timer = setTimeout(this.show, 5000, sl, 1);
        }
    };
    // Obtener todos los contenedores de slider
    this.sliders = document.querySelectorAll('.abs-slider');
    if(this.sliders.length == 0) {
        // No se encontraron sliders, salir
        return;
    }
    // Recorrer sliders para activar
    this.sliders.forEach(sl => {
        // ¿Ya se había activado este slider?
        if(sl.items) {
            // No activar nuevamente
            return;
        }
        // El primer elemento es el que estará activo
        sl.index = 0;
        // Obtener elementos
        sl.items = sl.querySelectorAll(':scope > .abs-slider-container');
        // Obtener botones anterior y siguiente
        sl.buttons = sl.querySelectorAll('.abs-slider-prev, .abs-slider-next');
        // Ocultar botones hasta saber si se deben mostrar
        sl.buttons.forEach(btn => btn.style.display = 'none');
        // Solo si el slider contiene elementos
        if(sl.items) {
            // Obtener tiempo entre elementos
            sl.timing = sl.dataset.timing || '500ms';
            // Posicionar primer elemento
            if(!sl.items[0].style.left) {
                sl.items[0].style.animation = `abs-from-right ${sl.timing} forwards 0s 1`;
            }
            // Si hay más de un elemento
            if(sl.items.length > 1) {
                // Determinar avance automático o manual
                sl.manual = (sl.dataset.manual && sl.dataset.manual == 'true');
                if(!sl.manual) {
                    // Inicializar si es automático
                    sl.timer = setTimeout(this.show, 5000, sl, 1);
                }
                // Mostrar botones anterior / siguiente
                sl.buttons.forEach(btn => btn.style.display = 'block');
                // Asignar evento a botones
                sl.buttons[0].addEventListener('click', () => { this.show(sl, -1); });
                sl.buttons[1].addEventListener('click', () => { this.show(sl, 1); });
            }
        }
    });
};

// Activar sliders, los que haya disponibles
absSlider();
.abs-slider {
    position:relative;
    display:block;
    width:100%;
    height:300px;
    overflow:hidden;
    margin:0;
    padding:0;
}
.abs-slider .abs-slider-container {
    position:absolute;
    top:0;
    left:100%;
    width:100%;
    height:100%;
    overflow:hidden;
    background-color:var(--aqua1);
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat;
    /* Atributos flex */
    display:flex;
    gap:10px;
}
/* Contenedores dentro de cada slider */
.slider-inner {
    /* Distribución uniforme y ocupando toda la altura disponible */
    flex:1;
    height:100%;
    /* Ajustar tamaño independientemente de bordes o márgenes */
    box-sizing:border-box;
    /* Solo para ver el tamaño de cada elemento */
    border:1px #fa8 solid;
}
.abs-slider-prev, .abs-slider-next {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    display:block;
    opacity:0.6;
    width:45px;
    height:45px;
    line-height:45px;
    font-size:35px;
    text-align:center;
    color:#fff;
    background:rgba(0,0,0,0.3);
    cursor:pointer;
    border-radius:50%;
    text-shadow:3px 3px 5px rgba(0,0,0,0.5);
}
.abs-slider-prev:hover, .abs-slider-next:hover { opacity:1; }
.abs-slider-prev { left:10px; }
.abs-slider-next { right:10px; }
@keyframes abs-from-left {
    0% { left:-100%; }
    100% { left:0; }
}
@keyframes abs-from-right {
    0% { left:100%; }
    100% { left:0; }
}
@keyframes abs-to-left {
    0% { left:0; }
    100% { left:-100%; }
}
@keyframes abs-to-right {
    0% { left:0; }
    100% { left:100%; }
}
<div class="abs-slider" data-manual="true">
    <div class="abs-slider-container">
        <div class="slider-inner">1</div>
        <div class="slider-inner">2</div>
        <div class="slider-inner">3</div>
        <div class="slider-inner">
            <p>Cada elemento</p>
            <ul>
                <li>Puede contener lo que requieras</li>
                <li>No importa si son diferentes</li>
                <li>Se va a adaptar</li>
            </ul>
        </div>
    </div>
    <div class="abs-slider-container">
        <div class="slider-inner">5</div>
        <div class="slider-inner">
            <p>Cada elemento</p>
            <ul>
                <li>Puede contener lo que requieras</li>
                <li>No importa si son diferentes</li>
                <li>Se va a adaptar</li>
            </ul>
        </div>
        <div class="slider-inner">7</div>
        <div class="slider-inner">8</div>
    </div>
    <span class="abs-slider-prev">&#10094;</span>
    <span class="abs-slider-next">&#10095;</span>
</div>

2
  • 1
    @DBE, en la respuesta original se explican todas las opciones disponibles y solo había que agregar el atributo data-manual="true" para que no se ejecute automáticamente. Edite la respuesta para que veas que funciona.
    – Triby
    Commented el 27 ene. 2022 a las 23:37
  • Si lo de data-manual='true' lo vi, se ve muy bien. Y también funciona. Gracias por el ejemplo.
    – D.Bulten
    Commented el 27 ene. 2022 a las 23:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.