El control deslizante Nivo es reconocido mundialmente como el slider más hermoso y fácil de usar en el mercado. El plugin de jQuery es totalmente gratuito y de código abierto totalmente y no hay mejor manera de hacer que su sitio web tenga un mejor aspecto.
Mostrar Codigo style type="text/css"/* ![CDATA[ */ #Container {position: relative;display: block;} #NivoSlider {position:relative;width:640px !important;height:480px !important;min-height:225px !important;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZoBsl-abL8FuuGtddjeV38KmKx65nbSITzUoRPwrSj_R0pUcARkNSKXKJaMk8nttIB-p-FgCj3i8FkBLdYsurAl6j7XCkV0XI3Sio7SzkTDg7V-JFGjZIrzveocR_N0N4KI7EYSnofeJ1/s1600/w2bLoader.gif") no-repeat 50% 50%; margin: 20px auto 35px;-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);-moz-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);box-shadow: 0px 1px 5px rgba(0,0,0,0.4);} #NivoSlider img {position:absolute;top:0;left:0;display:none} .nivoSlider {position:relative;width:100%;height:auto;} .nivoSlider img {position:absolute;top:0;left:0} .nivo-main-image {display:block!important;position:relative!important;width:100%!important} .nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none} .nivo-slice {display:block;position:absolute;z-index:5;height:100%;top:0} .nivo-box {display:block;position:absolute;z-index:5;overflow:hidden} .nivo-box img {display:block} .nivo-caption {padding:10px;font-family:Helvetica,Arial,sans-serif;position:absolute;left:10px;bottom:10px;right:10px;background:#000;color:#fff;-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width:auto;z-index:8;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .nivo-caption p {padding:5px;margin:0} .nivo-caption a {display:inline!important} .nivo-html-caption {display:none} .nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDJTqHVIMVs37jEIliO3ghYNR94ai2tqYdRIXk8Fc_sU1HfY7QSirnm2dr921ugkSCVyNsS9j0tObD1Am7osYFi2hL_0e93UqB5JlTsyUI4TsrVVVYw4OL-q_Ur9kd6ZKjPaSje1IrX_SS/s1600/w2bArrows.png") no-repeat;text-indent:-9999px;border:0} .nivo-prevNav {left:10px} .nivo-nextNav {background-position:-30px 0!important;right:10px} .nivo-controlNav {position:absolute;left:0;right:0;bottom:-35px;text-align:center} .nivo-controlNav a {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEielZglOM1YYmRj5QJgmjvlAAvt13UqVy38a_C3wYCmIo9hj5Q-730Vr_IIMZ4QTBsZAsAGvwX6ebTuRjnUHbfUBKWfoY7zOaEuRgHbdFhKYa5x2_rXJt6g1telNZmWc3KjstBHpt3nkpVd/s1600/w2bBullets.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px} .nivo-controlNav a.active {font-weight:bold;background-position:0 -22px}/* *//stylescript type="text/javascript" src="jquery-1.8.3.min.js"/scriptscript type="text/javascript" src="https://sites.google.com/site/javafacesitefile/fileblog/nivo_slider.js"/scriptscript type="text/javascript"/* ![CDATA[ */jQuery(document).ready(function($) { $('#NivoSlider').nivoSlider({ effect : 'random', slices : 15, boxCols : 8, boxRows : 4, animSpeed : 500, pauseTime : 3000, startSlide : 0, directionNav : true, directionNavHide : true, controlNav : true, keyboardNav : false, pauseOnHover : true, captionOpacity : 0.6 });});/* *//script
Recuerde que para utilizar este Plugindeberátener instalado el Plugin JQuery caso contrario no funcionara.
Parámetros del Pluginsi usted llegase a desear otro efecto de desplazamiento o cambiar el tamaño de lasimágenesa su gustodeberáde tener en cuenta lo siguiente:
A) para cambiar el tamaño del Slider y adaptarlo a la imagen que usted desee solo debe de encontar el estilo
#NivoSlider {position:relative;width:640px !important; height:480px !important;}
cambiando los valores width(Ancho) y height(Alto)podrácambiar el tamaño del Slider.
B) Para cambiar las configuraciones del slider ya sea el efecto de desplazamiento,la opacidad,el tiempo de cada imagen usted lopodráhacer dentro del JQuery.
Estos son los valores por defectoeffect : 'random',slices : 15,boxCols : 8,boxRows : 4,animSpeed : 500,pauseTime : 3000,startSlide : 0,directionNav : true,directionNavHide : true,controlNav : true,keyboardNav : false,pauseOnHover : true,captionOpacity : 0.6
effect es la variable que recibe el valor del efecto deseado los cuales son:randomsliceDownsliceDownLeftsliceUpsliceUpLeftsliceUpDownsliceUpDownLeftfoldfadeslideInRightslideInLeftboxRandomboxRainboxRainReverseboxRainGrowboxRainGrowReverseustedpodrájugar cambiando los valores asta tener el efecto de su agrado.
slices: cantidad de rebanadas que sera dividida la imagen
boxCols: columnas
boxRows: filas
animSpeed : velocidad detransicióndel slider
pauseTime : tiempo que se demora cada imagen
startSlide: tiempo que debe de comenzar el slider por general es 1 o 0
directionNav : botones dedirección que reciben un valor booleano
true:Activado
false: desactivado
directionNavHide : muestra los botones dedirecciónsegúnel valor booleano al pasar el mouse por encima
true:Mostrar
false:No Mostrar
controlNav: Mostrar controles dedirección
keyboardNav: activarnavegacióncon el teclado
pauseOnHover: detener laanimaciónotransiciónal pasar elmouse
captionOpacity: opacidad de lasimágenesa realizar la transición
Paso 2) Crear el contenedor y añadir lasimágenesUna vez culminado el paso 1 , solo queda añadir lasimágenesdentro de un contenedor DIV, para ello dirigase alaopciónDiseño-- y escoja laopciónañadir un gadget - y escoja la opcionHTML/Javascript y pegue el siguientecódigo.
div id="Container" div id="NivoSlider" img src="http://www.fondos-hq.com/upload/DesktopWallpapers/cache/03816-640x480.jpg" title="Imagen 1" alt=""/ img src="http://a123.g.akamai.net/7/123/5290/v0001/mtviestor.download.akamai.com/8619/_!//intlod/MTVInternational/umg_int/usuv71/100402/USUV71100402_640x480_1.jpg" title="Imagen 2" alt=""/ img src="http://img208.imageshack.us/img208/2962/img3048640x480sy1.jpg" title="Imagen 3" alt=""/ /div/div
Para añadir mas imágenes solo debe de colocar el código
img src="direccion de imagen" title="titulo de imagen"
/ dentro del contenedor div id="NivoSlider".
Recomendación:Recuerde que antes de utilizar cualquier Slider que utilice JQuerydeberátener instalado el Plugin de JQuery y no colocarimágenesqueexcedanel peso de 400kb por quepodríavolver lento la carga de su blog.(si te sirvio este post ayudame dando clic ▼ en la imagen :) )
Genial! pero sabes como puedo redondear los bordes del slider?
ResponderEliminarque tal Skynnet me alegra que ta guste,para dedondear cualquier cosa con css utilza border-radius aqui te dejo un link de una pagina que genera el codigo Generador , espero te sirva :)
ResponderEliminar