Como añadir un link/acción de botón a imágenes de SLIDER – jQuery Javascript

publicado por: Anonymous

Quisiera añadir una acción/efecto de botón sobre cada una de las 4 imágenes que se añaden en el SLIDER. Bien, al pulsar la imagen se abra otra página para mostrar otro contenido.

Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Slider Jquery</title>
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/font-awesome.css">

    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
    <div class="slideshow">
        <ul class="slider">
            <li>
                <img src="img/1.jpg" alt="">
                <section class="caption">
                    <h1>Primera imagen</h1>
                    <p>Primera imagen. Slider personalizado.</p>
                </section>
            </li>
            <li>
                <img src="img/2.jpg" alt="">
                <section class="caption">
                    <h1>Segunda imagen</h1>
                    <p>Segunda imagen. Slider personalizado.</p>
                </section>
            </li>
            <li>
                <img src="img/3.jpg" alt="">
                <section class="caption">
                    <h1>Tercera imagen.</h1>
                    <p>Tercera imagen. Slider personalizado.</p>
                </section>
            </li>
            <li>
                <img src="img/4.jpg" alt="">
                <section class="caption">
                    <h1>Cuarta imagen</h1>
                    <p>Cuarta imagen. Slider personalizado.</p>
                </section>
            </li>
        </ul>

        <ol class="pagination">
        </ol>

        <div class="left">
            <span class="fa fa-chevron-left"></span>
        </div>

        <div class="right">
            <span class="fa fa-chevron-right"></span>
        </div>

    </div>
</body>
</html>

Código jQuery en archivo JS:

$(document).ready(function(){
    var imgItems = $('.slider li').length; // Numero de Slides
    var imgPos = 1;

    // Agregando paginación --
    for(i = 1; i <= imgItems; i++){
        $('.pagination').append('<li><span class="fa fa-circle"></span></li>');
    } 

    //------------------------

    $('.slider li').hide(); // Ocultamos todos los slides
    $('.slider li:first').show(); // Mostramos el primer slide
    $('.pagination li:first').css({'color': '#CD6E2E'}); // Damos estilos al primer item de la paginación

    // Ejecutamos todas las funciones
    $('.pagination li').click(pagination);
    $('.right span').click(nextSlider);
    $('.left span').click(prevSlider);


    setInterval(function(){
        nextSlider();
    }, 4000);

    // FUNCIONES =========================================================

    function pagination(){
        var paginationPos = $(this).index() + 1; // Posicion de la paginacion seleccionada

        $('.slider li').hide(); // Ocultamos todos los slides
        $('.slider li:nth-child('+ paginationPos +')').fadeIn(); // Mostramos el Slide seleccionado

        // Dandole estilos a la paginacion seleccionada
        $('.pagination li').css({'color': '#858585'});
        $(this).css({'color': '#CD6E2E'});

        imgPos = paginationPos;
    }

    function nextSlider(){
        if( imgPos >= imgItems){imgPos = 1;} 
        else {imgPos++;}

        $('.pagination li').css({'color': '#858585'});
        $('.pagination li:nth-child(' + imgPos +')').css({'color': '#CD6E2E'});

        $('.slider li').hide(); // Ocultamos todos los slides
        $('.slider li:nth-child('+ imgPos +')').fadeIn(); // Mostramos el Slide seleccionado
    }

    function prevSlider(){
        if( imgPos <= 1){imgPos = imgItems;} 
        else {imgPos--;}

        $('.pagination li').css({'color': '#858585'});
        $('.pagination li:nth-child(' + imgPos +')').css({'color': '#CD6E2E'});

        $('.slider li').hide(); // Ocultamos todos los slides
        $('.slider li:nth-child('+ imgPos +')').fadeIn(); // Mostramos el Slide seleccionado
    }

});

A continuación incluyo la página primera.html donde quisiera que se viera el contenido al pulsar sobre la imagen 1 del slider.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">

        <title>Primera imagen Jquery</title>
        <link rel="stylesheet" href="css/estilos.css">
        <link rel="stylesheet" href="css/font-awesome.css">

        <script src="js/jquery-3.1.0.min.js"></script>
        <script src="js/main.js"></script>
    </head>
    <body>
        <div class="slideshow">
        <center>
            <img src="img/1.jpg" alt="Texto de la primera imagen" title="Titulo de la primera imagen" width="560" height="280"/>
        </center>
        </div>
    </body>
</html>

solución

Que tal si encierras el contenido de la imagen del slider en un <a>:

_x000D_

_x000D_

var imgItems = $('.slider li').length; // Numero de Slides_x000D_
var imgPos = 1;_x000D_
_x000D_
for(i = 1; i <= imgItems; i++){_x000D_
    $('.pagination').append('<li><span class="fa fa-circle"></span></li>');_x000D_
}_x000D_
$('.slider li').hide();_x000D_
$('.slider li:first').show();_x000D_
$('.pagination li:first').css({'color': '#CD6E2E'});_x000D_
$('.pagination li').click(pagination);_x000D_
$('.right span').click(nextSlider);_x000D_
$('.left span').click(prevSlider);_x000D_
setInterval(function(){_x000D_
    nextSlider();_x000D_
}, 4000);_x000D_
function pagination(){_x000D_
    var paginationPos = $(this).index() + 1; // Posicion de la paginacion seleccionada_x000D_
    $('.slider li').hide(); // Ocultamos todos los slides_x000D_
    $('.slider li:nth-child('+ paginationPos +')').fadeIn();_x000D_
    $('.pagination li').css({'color': '#858585'});_x000D_
    $(this).css({'color': '#CD6E2E'});_x000D_
    imgPos = paginationPos;_x000D_
}_x000D_
_x000D_
function nextSlider(){_x000D_
    if( imgPos >= imgItems){imgPos = 1;} _x000D_
    else {imgPos++;}_x000D_
    $('.pagination li').css({'color': '#858585'});_x000D_
    $('.pagination li:nth-child(' + imgPos +')').css({'color': '#CD6E2E'});_x000D_
    $('.slider li').hide(); // Ocultamos todos los slides_x000D_
    $('.slider li:nth-child('+ imgPos +')').fadeIn(); // Mostramos el Slide seleccionado_x000D_
}_x000D_
function prevSlider(){_x000D_
    if( imgPos <= 1){imgPos = imgItems;} _x000D_
    else {imgPos--;}_x000D_
    $('.pagination li').css({'color': '#858585'});_x000D_
    $('.pagination li:nth-child(' + imgPos +')').css({'color': '#CD6E2E'});_x000D_
    $('.slider li').hide(); // Ocultamos todos los slides_x000D_
    $('.slider li:nth-child('+ imgPos +')').fadeIn(); // Mostramos el Slide seleccionado_x000D_
}

_x000D_

a {_x000D_
    color: inherit;_x000D_
    text-decoration: none;_x000D_
    display: inline-block;_x000D_
    cursor: pointer;_x000D_
}

_x000D_

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>_x000D_
<div class="slideshow">_x000D_
  <ul class="slider">_x000D_
      <li>_x000D_
          <a href="https://www.google.es" target="_blank">_x000D_
              <img src="img/1.jpg" alt="">_x000D_
              <section class="caption">_x000D_
                  <h1>Primera imagen</h1>_x000D_
                  <p>Primera imagen. Slider personalizado.</p>_x000D_
              </section>_x000D_
          </a>_x000D_
      </li>_x000D_
      <li>_x000D_
          <a href="https://www.yahoo.com" target="_blank">_x000D_
              <img src="img/2.jpg" alt="">_x000D_
              <section class="caption">_x000D_
                  <h1>Segunda imagen</h1>_x000D_
                  <p>Segunda imagen. Slider personalizado.</p>_x000D_
              </section>_x000D_
          </a>_x000D_
      </li>_x000D_
      <li>_x000D_
          <a href="https://www.bing.com" target="_blank">_x000D_
              <img src="img/3.jpg" alt="">_x000D_
              <section class="caption">_x000D_
                  <h1>Tercera imagen.</h1>_x000D_
                  <p>Tercera imagen. Slider personalizado.</p>_x000D_
              </section>_x000D_
          </a>_x000D_
      </li>_x000D_
      <li>_x000D_
          <a href="https://www.stackoverflow.com" target="_blank">_x000D_
              <img src="img/4.jpg" alt="">_x000D_
              <section class="caption">_x000D_
                  <h1>Cuarta imagen</h1>_x000D_
                  <p>Cuarta imagen. Slider personalizado.</p>_x000D_
              </section>_x000D_
          </a>_x000D_
      </li>_x000D_
  </ul>_x000D_
  <ol class="pagination">_x000D_
  </ol>_x000D_
  <div class="left">_x000D_
      <span class="fa fa-chevron-left"></span>_x000D_
  </div>_x000D_
  <div class="right">_x000D_
      <span class="fa fa-chevron-right"></span>_x000D_
  </div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

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