Slider de imágenes logrado con Javascript
Hay diversos Slider de Imágenes que podemos encontrar en la red, pero casi no encontramos uno que se adapte perfectamente a el diseño de nuestro blog. Los Slider generalmente se usan para hacer saber a los lectores cuales son los artículos más leídos, más comentados, entre otros.
El Slider que hoy compartiré con ustedes, tiene un fabuloso efecto de transicion logrado con javascript y en la parte superior de la izquierda se puede observar un banda con el texto "Populares".
Para agregarlo en nuestro blog nos dirigimos a Diseño, Añadir Gadget, HTML/Javascript, y pegamos:
Cambia lo resaltado de colores por la URL y texto que indica.
Vía Helper Blogger
El Slider que hoy compartiré con ustedes, tiene un fabuloso efecto de transicion logrado con javascript y en la parte superior de la izquierda se puede observar un banda con el texto "Populares".
Para agregarlo en nuestro blog nos dirigimos a Diseño, Añadir Gadget, HTML/Javascript, y pegamos:
<style type="text/css">
#mcis {
display: none;
}
#sliderFrame {
position: relative;
width: 500px;
margin: 0 auto;
margin-bottom:35px;
border:5px solid #000;
}
#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
left: -4px;
background: url(https://sites.google.com/site/novedadblogger/home/Populares.png) no-repeat;
z-index: 7;
}
#slider {
width: 500px;
height: 250px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGxuMvBiw7z7Mk2GP_tMzpkLL_kfwjc_BXk1G86j_K9YmZEyl7lID7sQ_RANKBC4ql2HS7ONh6yCxDlnrSuE8CtQnKwk4ZvxbFpTNosYwBr3NxfotlJ4PGhh1u3JUzyEzdJjdO2LOAFYh3/s32-no/loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position: absolute;
border: none;
display: none;
}
#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color: black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}
div.mc-caption a {
color: #FB0;
}
div.mc-caption a:hover {
color: #DA0;
}
div.navBulletsWrapper {
top: 265px;
left: 190px;
width: 150px;
background: none;
padding-left: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}
div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuKiAvhlIMTRKfc4GT6RgnK2Dm6MvAh65O-NhG7vgo7bk07P11L1Cajvcr7NpUf_pgMZPKZTT7avBzSDPWJqw4A1g-dxKgpzsqWxxL8dHfa1GttuQ7Ei6lx6PlvyOT2aS84Eh6K5yPTwg-/w11-h22-no/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
_position: relative;
}
div.navBulletsWrapper div.active {
background-position: 0 -11px;
}
#slider {
transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
</style>
<script src="https://googledrive.com/host/0B-WopI-jeOOsT1NPRC1acHpxWmc/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">
<a href="#-1"><img src="URL-IMG-1" alt="TEXTO 1"/></a>
<a href="#-2"><img src="URL-IMG-2" alt="TEXTO 2"/></a>
<a href="#-3"><img src="URL-IMG-3" alt="TEXTO 3"/></a>
<a href="#-4"><img src="URL-IMG-4" alt="TEXTO 4"/></a>
<a href="#-5"><img src="URL-IMG-5" alt="TEXTO 5"/></a>
</div>
</div>
Cambia lo resaltado de colores por la URL y texto que indica.
Vía Helper Blogger
Que tamaño deben de tener las imágenes?Gracias
ResponderBorrarDisculpe, esa parte la omití sin querer en el artículo, las dimensiones de la imagen deberían ser de 500 píxeles de ancho y 250 píxeles de alto.
BorrarSaludos.