#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Agrandar imágen al pasar el cursor
Publicaciones populares para blogger
Herramienta web de creacion de carteles
Las torturas de la edad media
La Santa Inquisición
Edificios de Madrid con leyendas de fantasmas
Blog en blanco para blogger
Manual Pixlr Editor ( Paso a Paso)
Modificando link de entradas antiguas y recientes
Paginar nuestro blog paso a paso
Tablas o pestañas para tu blog
Calendario que muestra los post publicados

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