#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Photopea, editor de imágenes gratis
Plantilla ClickMag-2
Introducción al HTML
Hacer tooltip con una imagen
Rutinas The Ordinary
Personalizar la primera letra de las entradas del blog
Convertidor PDF, JPG, Word, Excel, PNG...
Efectos imágenes para las entradas de nuestro blog
Plantilla Vogue
Cómo Insertar un PDF en excel
Botón subir arriba
Calcular el porcentaje

Slider deslizante para nuestras entradas

Hoy vamos a mostrar como podemos poner un slider en nuestras entradas con efecto deslizante.
Para ello nos vamos a nuestra entrada y en la edición HTML copiamos el siguiente código

Así nos quedaría


<div id="slider-wrapper">
<div id="slider">
<a href="URL_ENLACE1"><img src="http://www.fondosni.com/images/wallpapers/3_bebes_lindos-734660.jpg" /><p>TEXTO1</p></a>
<a href="URL_ENLACE2"><img src="http://www.imagexia.com/img/Bebe-con-perrito.jpg" /><p>TEXTO2</p></a>
<a href="URL_ENLACE3"><img src="https://lephotograph.es/wp-content/uploads/2018/12/fotografos-de-bebes-en-logrono-1-400x300.jpg" /><p>TEXTO3</p></a>
</div>
<a href="javascript:void();" class="mas">&rsaquo;</a>
<a href="javascript:void();" class="menos">&lsaquo;</a></div>

<script>
$(function(){
$('#slider a:gt(0)').hide();
var interval = setInterval(changeDiv, 6000);
function changeDiv(){
$('#slider a:first-child').fadeOut(1000).next('a').fadeIn(1000).end().appendTo('#slider');
};
$('.mas').click(function(){
changeDiv();
clearInterval(interval);
interval = setInterval(changeDiv, 6000);
});
$('.menos').click(function(){
$('#slider a:first-child').fadeOut(1000);
$('#slider a:last-child').fadeIn(1000).prependTo('#slider');
clearInterval(interval);
interval = setInterval(changeDiv, 6000);
});
});
</script>

<style>
/* Contenedor general */
#slider-wrapper {
position: relative;
width: 800px;
max-width: 100%;
margin: 0 auto;
padding: 0 10px;
font-family: arial, sans-serif;
font-size: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Contenedor slider */
#slider { 
position: relative;
width: 100%;
padding-bottom: 50%; /* Aspect ratio */
overflow: hidden;
border:10px solid #333;
border-radius: 5%/10%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#slider > a {
position:absolute;
top:0;
left:0;
width: 100%;
min-height: 100%;
}
/* Ajuste de las imágenes */
#slider img {
width: 100%;
min-height: 100%;
position: absolute;
margin:0;
padding:0; 
border:0;
}
/* Texto que acompaña a cada imagen */
#slider p {
position: absolute;
bottom: 5%;
left: 0;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 80%;
height: 18px;
margin:0;
padding: 5px 0;
border-radius: 0 20px 20px 0;
color: #eee;
background: #333;
font-size: 18px;
line-height: 18px;
text-align:center;
}
/* Flechas de navegación */
a.mas, a.menos {
position: absolute;
top: 50%;
left: 10px;
z-index: 10;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 30px;
color: white;
background: #333;
text-decoration: none;
}
a.mas {
left: 100%;
margin-left: -40px;
}
</style>


Sólo tenéis que cambiar URL_ENLACExURL_IMAGENx y TEXTOx enla parte HTML por vuestros propios datos y listo. 

Publicar un comentario

0 Comentarios