5

He intentado modificar un slider, pero mis nulos conocimientos en javascript me hacen entender muy poco como hacerlo.

El slider es este: https://github.com/lgse/micro-slider

El diseño que quiero lograr es este: introducir la descripción de la imagen aquí

He intentado modificar el ejemplo para añadir las dos flechas de dirección acá:

window.onload = function () {
  new MicroSlider('.micro-slider', { indicators: true, indicatorText: '' });
  new MicroSlider('.micro-slider.no-wrap', { indicators: true, indicatorText: '', noWrap: true });
  new MicroSlider('.micro-slider.fullwidth', { indicators: true, indicatorText: '', fullWidth: true });

  document.getElementById('next').addEventListener(function (e) {
    slider.next();
  });
  document.getElementById('previous').addEventListener(function (e) {
    slider.previous();
  });
}
.micro-slider {
    height: 480px;
    position: relative;
    width: 100%;
}

.slider-wrapper {
    overflow: hidden;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: 0 50%;
}

.slider-item {
    background: black;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.12);
    display: none;
    height: 320px;
    left: 0;
    position: absolute;
    top: 0;
    width: 320px;
}

.slider-item:not(.active) {
    cursor: pointer;
}

#next,
#direction{
  position: absolute;
  z-index: 3;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/micro-slider.min.js"></script>

<div class="micro-slider">
  <button id="next"><-</button>
  <figure class="slider-item">1</figure>
  <figure class="slider-item">2</figure>
  <figure class="slider-item">3</figure>
  <figure class="slider-item">4</figure>
  <figure class="slider-item">5</figure>
  <figure class="slider-item">6</figure>
  <figure class="slider-item">7</figure>
  <figure class="slider-item">8</figure>
  <figure class="slider-item">9</div>
  <button id="previous">-></button>
</div>

Con diseño no me refiero a colores, tipografías, ni a las fotos, sino a que hayan 3 slides por pantalla y no 5, además de que funcionen los botones de las flechas a los lados.

Tampoco sé como modificar el tamaño para usar medidas relativas como vh o vw o hacer que los botones funcionen. ¿Alguien sabe como hacerlo?

Me disculpo por si es muy básico, pero tengo casi un año donde no toco código sólo diseño y se me han olvidado muchas cosas y sumado a que realmente se poco de javascript, pues...

Agradezco cualquier apoyo, gracias.


Actualice el script con la respuesta dada por @mateo

Hola, muchas gracias por ayudar, pero aún no se comporta como debe:

window.onload = function () {
  new MicroSlider('.micro-slider', { indicators: true, indicatorText: '' });
  new MicroSlider('.micro-slider.no-wrap', { indicators: true, indicatorText: '', noWrap: true });
  new MicroSlider('.micro-slider.fullwidth', { indicators: true, indicatorText: '', fullWidth: true });

  document.getElementById('next').addEventListener("click", function(e){
     slider.next();
  })
  document.getElementById('previous').addEventListener("click", function(e){
     slider.next();
  })
}
body{
  display: flex;
  justify-content: center;
  background-color: #111;
}

.micro-slider {
  --size: 60vW;
  height: calc( ( (var(--size) / 100) * 15 ) + var(--size) );
  position: relative;
  width: 100%;
  width: calc(100% - 5em);
  background-color: rgba(0,0,0,.1);
}

.slider-wrapper {
    overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 0 50%;
}

.slider-item {
    background-color: black;
    background-size: cover;
    background-position: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.12);
    display: none;
    left: 0;
    position: absolute;
    top: 0;
    width: var(--size);
    height: calc( ( var(--size) / 100 ) * 60 ) ;
}

/*Lo siguiente son estilos de diseño*/

:root{
--img1: url('https://picsum.photos/1600/900?random=1');
--img2: url('https://picsum.photos/1600/900?random=2');
--img3: url('https://picsum.photos/1600/900?random=3');
--img4: url('https://picsum.photos/1600/900?random=4');
--img5: url('https://picsum.photos/1600/900?random=5');
--img6: url('https://picsum.photos/1600/900?random=6');
--img7: url('https://picsum.photos/1600/900?random=7');
--img8: url('https://picsum.photos/1600/900?random=8');
--img9: url('https://picsum.photos/1600/900?random=9');
--icon: 'font awesome';
}

.direction{
  position: absolute;
  z-index: 3;
  font-family: var(--icon);
  cursor: pointer;
  background-color: rgba(255,255,255,0);
  border: none;
  top: 50%;
  --x: -1em;
  font-size: 3em;
  color: #B7950B;
}

#next{
  left: var(--x) ;
}

#previous{
  right: var(--x) ;
}



.slider-item:not(.active) {
  cursor: pointer;
}

.slider-item:nth-child(1){background-image:var(--img1);}
.slider-item:nth-child(2){background-image:var(--img2);}
.slider-item:nth-child(3){background-image:var(--img3);}
.slider-item:nth-child(4){background-image:var(--img4);}
.slider-item:nth-child(5){background-image:var(--img5);}
.slider-item:nth-child(6){background-image:var(--img6);}
.slider-item:nth-child(7){background-image:var(--img7);}
.slider-item:nth-child(8){background-image:var(--img8);}
.slider-item:nth-child(9){background-image:var(--img9);}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/micro-slider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<div class="micro-slider">
  <button class="direction" id="next"><i class="fa fa-angle-left" aria-hidden="true"></i>
</button>
  <figure class="slider-item"></figure>
  <figure class="slider-item"></figure>
  <figure class="slider-item"></figure>
  <figure class="slider-item"></figure>
  <figure class="slider-item"></figure>
  <figure class="slider-item"></figure>
  <figure class="slider-item"></figure>
  <figure class="slider-item"></figure>
  <figure class="slider-item"></figure>
  <button class="direction" id="previous"><i class="fa fa-angle-right" aria-hidden="true"></i>
</button>
</div>

1
  • new MicroSlider crea una instancia del slider, estas creando 3 instancias y no las asignas a ninguna variable para tener la referencia. Esa referencia te permite luego hacer slider.next(); ( en este caso slider es la referencia ). El código va mas por el lado de var slider = new MicroSlider( 'selector', { opciones } ); Commented el 28 abr. 2020 a las 18:37

2 respuestas 2

10
+25

Como te dijo @Mateo, hay que crear una variable para asignar la instancia y poder usar los métodos para anterior / siguiente. Además, tenías los nombres de las flechas al revés.

let slider = new MicroSlider('.micro-slider', { indicators: true, indicatorText: '' }); esto permite tener la instancia en la variable slider, necesaria para retroceder slider.prev(); y avanzar slider.next();

No hay opción para tener visibles solo 3 elementos, simplemente se adapta al ancho de la pantalla y muestra los que caben. No es algo que se pueda configurar.

window.onload = function () {
  let slider = new MicroSlider('.micro-slider', { indicators: true, indicatorText: '' });

  document.getElementById('next').addEventListener("click", function(e){
     slider.next();
  })
  document.getElementById('previous').addEventListener("click", function(e){
     slider.prev();
  })
}
body{
  display: flex;
  justify-content: center;
  background-color: #111;
}

.micro-slider {
  --size: 60vW;
  height: calc( ( (var(--size) / 100) * 15 ) + var(--size) );
  position: relative;
  width: 100%;
  width: calc(100% - 5em);
  background-color: rgba(0,0,0,.1);
}

.slider-wrapper {
    overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 0 50%;
}

.slider-item {
    background-color: black;
    background-size: cover;
    background-position: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.12);
    display: none;
    left: 0;
    position: absolute;
    top: 0;
    width: var(--size);
    height: calc( ( var(--size) / 100 ) * 60 ) ;
}

/*Lo siguiente son estilos de diseño*/

:root{
--img1: url('https://picsum.photos/1600/900?random=1');
--img2: url('https://picsum.photos/1600/900?random=2');
--img3: url('https://picsum.photos/1600/900?random=3');
--img4: url('https://picsum.photos/1600/900?random=4');
--img5: url('https://picsum.photos/1600/900?random=5');
--img6: url('https://picsum.photos/1600/900?random=6');
--img7: url('https://picsum.photos/1600/900?random=7');
--img8: url('https://picsum.photos/1600/900?random=8');
--img9: url('https://picsum.photos/1600/900?random=9');
--icon: 'font awesome';
}

.direction{
  position: absolute;
  z-index: 3;
  font-family: var(--icon);
  cursor: pointer;
  background-color: rgba(255,255,255,0);
  border: none;
  top: 50%;
  --x: -1em;
  font-size: 3em;
  color: #B7950B;
}

#next{
  right: var(--x) ;
}

#previous{
  left: var(--x) ;
}



.slider-item:not(.active) {
  cursor: pointer;
}

.slider-item:nth-child(1){background-image:var(--img1);}
.slider-item:nth-child(2){background-image:var(--img2);}
.slider-item:nth-child(3){background-image:var(--img3);}
.slider-item:nth-child(4){background-image:var(--img4);}
.slider-item:nth-child(5){background-image:var(--img5);}
.slider-item:nth-child(6){background-image:var(--img6);}
.slider-item:nth-child(7){background-image:var(--img7);}
.slider-item:nth-child(8){background-image:var(--img8);}
.slider-item:nth-child(9){background-image:var(--img9);}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/micro-slider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<div class="micro-slider">
  <button class="direction" id="previous"><i class="fa fa-angle-left" aria-hidden="true"></i>
</button>
  <figure class="slider-item"></figure>
  <figure class="slider-item"></figure>
  <figure class="slider-item"></figure>
  <figure class="slider-item"></figure>
  <figure class="slider-item"></figure>
  <figure class="slider-item"></figure>
  <figure class="slider-item"></figure>
  <figure class="slider-item"></figure>
  <figure class="slider-item"></figure>
  <button class="direction" id="next"><i class="fa fa-angle-right" aria-hidden="true"></i>
</button>
</div>

5

El problema que identifico en tu código es que le pasas solo un parámetro a addEventListener() y esa función requiere de dos parámetros para su ejecución, que son: el evento que debe ocurrir y la función a la que se llamará cuando ocurra.

Si tú caso es el evento que ocurre cuando cliqueas el código para añadirlo tendría una forma similar a esta:

Control.addEventListener("click", function(){
   ...
})

Puedes obtener más información de referencia en W3Schools o en MDN WebDocs. También sobre todos los eventos en los mismos sitios (W3) y (MDN). Hay muchos más pero considera tenerlos en tus marcadores para cada vez que necesites consultar algún tutorial o documentación.

Modificacion

Bien, otro problema que encuentro es que slider no está definido. Eso quiere decir, que no sucederá nada cuando quieras interactuar con él. Para resolver ese problema basta con guardar una instancia MicroSlider en él.

var slider = new MicroSlider(...);

var es necesario en caso de que se quiera poder acceder a la variable desde fuera de la función en la que está definida. Eso arregla terminaría de arreglar los botones.

Cabe mencionar que el código, según en qué posición del documento lo cargues deberás hacerlo de una forma u otra. Para su correcto funcionamiento, debes incluirlo luego de cargar micro-slider.min.js y también del div que usarás como slider. Un opción es ubicarlo al final del body y te ahorras usar window.onload. Otra opción es ubicarlo en el head o al inicio del body, pero deberá ser luego de haber cargado micro-slider.min.js y para ese caso si necesitarás hacer uso de window.onload

Cómo último error, que se me olvidó comentar y finalmente @Triby lo hizo, en el botón previous deberías llamar a slider.prev() y no a slider.next, a menos que quieras 2 botones que hagan lo mismo.

2
  • Hola, muchas gracias por tu ayuda. Actualice el código con tu sugerencia pero por mi mala suerte o falta de conocimientos, aún no funcionan las flechas. ¿Qué podría ser? Otra cosa, sabes como limitar para que aparezcan en pantalla sólo 3 slides y no 5? De verdad gracias por responder. Commented el 28 abr. 2020 a las 18:24
  • Me imagino que te refieres a la cantidad de imagenes visibles a la vez. Bueno, según lo que he visto no hay una opción que limite eso. Deberías crear una copia del código fuente del slider y modificarlo. He visto que la cantidad visible varía de acuerdo a como cambias el zum con la página cambiada. Sinceramente no me convence el funcionamiento que tiene. Por cierto, ¿por qué instancias 3 MicroSlider?
    – Mateo
    Commented el 29 abr. 2020 a las 3:19

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.