0

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.

2 respuestas 2

3

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!

0

Dentro del div.slider-controls debería tener los 'botones'.

<div id="slider-controls" class="slider-controls">
  <div id="prev" class="slider-control-btn"></div>
  <div id="next" class="slider-control-btn"></div>
</div>

Con tus botones en el HTML ya solo necesitas posicionarlos y darles el estilo que quieras por CSS.

.slider-control-btn {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  ...
}

#prev {
  left: 20px;
}

#next {
  right: 20px;
}

Y su funcionalidad por JavaScript.

var btn-next = $('#next').on('click', funcionQuePaginaElSlider)
var btn-prev = $('#prev').on('click', funcionQuePaginaElSlider)

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.