¿Cómo crear button anterior y siguiente con jQuery/css?

publicado por: Anonymous

Cómo añado dos botones ( < ) ( > ), uno a la derecha y otro a la izquierda. Funcionalidad jQuery anterior y siguiente.

Ejemplo:

introducir la descripción de la imagen aquí

Código slider jsfiddle.

solución

En base al ejemplo publicado, puedes hacer lo siguiente. En tu HTML:
agrega dos enlaces, a tu gusto, que representarían las flechas izquierda y derecha

<nav>
    <a class="a-left"><img src="http://benschwarz.github.io/gallery-css/images/arrow-left.svg"></a>
    <a class="a-right"><img src="http://benschwarz.github.io/gallery-css/images/arrow-right.svg"></a>
</nav>

Como ves, los dos enlaces tienen una clase llamada a-left y a-right , esto es importante.

Luego en javascript, dentro de “Initialize” y después del siguiente bloque:

$('#slider-controls').html(output).on('click', 'div', function(e) {
    var $this = $(this);
    console.log("cargando....."+$this.index());
    if (currentSlider !== $this.index()) {
      changePanel($this.index());
    };
  });

agrega lo siguiente:

$('.a-left').on('click', function(e) {
        var left = currentSlider - 1;
        changePanel(left);
});

$('.a-right').on('click', function(e) {
        var right = currentSlider + 1;
        changePanel(right);
});

En el código anterior utilizamos la variable currentSlider, esta se encarga de guardar el número de la imagen posicionada en el momento, durante la transición, en el caso de la flecha izquierda le restamos, mientras que para la flecha derecha le sumamos el valor 1, luego le pasamos ese resultado a la función llamada changePanel, la misma se encarga de realizar la transición del slider.

Espero que esto te ayude.
Saludos!

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *