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>