1

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>

1 respuesta 1

1

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

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

for(i = 1; i <= imgItems; i++){
    $('.pagination').append('<li><span class="fa fa-circle"></span></li>');
}
$('.slider li').hide();
$('.slider li:first').show();
$('.pagination li:first').css({'color': '#CD6E2E'});
$('.pagination li').click(pagination);
$('.right span').click(nextSlider);
$('.left span').click(prevSlider);
setInterval(function(){
    nextSlider();
}, 4000);
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();
    $('.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 {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<div class="slideshow">
  <ul class="slider">
      <li>
          <a href="https://www.google.es" target="_blank">
              <img src="img/1.jpg" alt="">
              <section class="caption">
                  <h1>Primera imagen</h1>
                  <p>Primera imagen. Slider personalizado.</p>
              </section>
          </a>
      </li>
      <li>
          <a href="https://www.yahoo.com" target="_blank">
              <img src="img/2.jpg" alt="">
              <section class="caption">
                  <h1>Segunda imagen</h1>
                  <p>Segunda imagen. Slider personalizado.</p>
              </section>
          </a>
      </li>
      <li>
          <a href="https://www.bing.com" target="_blank">
              <img src="img/3.jpg" alt="">
              <section class="caption">
                  <h1>Tercera imagen.</h1>
                  <p>Tercera imagen. Slider personalizado.</p>
              </section>
          </a>
      </li>
      <li>
          <a href="https://www.stackoverflow.com" target="_blank">
              <img src="img/4.jpg" alt="">
              <section class="caption">
                  <h1>Cuarta imagen</h1>
                  <p>Cuarta imagen. Slider personalizado.</p>
              </section>
          </a>
      </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>

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.