Slide de imagenes con CSS y jQuery

0

Los slideshow de imágenes se han convertido en una tendencia y muchos templates sitios webs o themes de wordpress los traen incorporados para destacar sus contenidos más importantes. Anteriormente publicamos un Slide en CSS y jQuery simple y facil para implementar, también armamos una lista con 20 Sliders con jQuery y publicamos un slider circular muy creativo.

Hoy traemos un nuevo Slide de imágenes con CSS y jQuery que tiene un atractivo efecto de transición que le dará estilo a tu sitio web.

Slider-css-jquery-gratuito

Uso

Simplemente copia el siguiente código en donde quieras que aparezca el slide, y no olvides llamar los archivos que se encuentran en la carpeta sript y style antes del cierre del tag head

Esto va en antes de /head

<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
<link rel="stylesheet" type="text/css" media="screen" href="style/default.css">
<link rel="stylesheet" type="text/css" href="style/home.css">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="style/styles_ie.css" />
<![endif]--> 
<script type="text/javascript" language="javascript" src="script/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" language="javascript" src="script/jquery.easing.1.3.js"></script>
<script type="text/javascript" language="javascript" src="script/home.js"></script>

Slide HTML

Pega el siguiente codigo donde quieras colocar el slide.

<body onload="load_animations()">
<!-- slider -->
<div class="container_12">
<div class="slider">
<div id="header_images" style="height: 468px; opacity: 1; ">
<img src="images/slider1_image_2.jpg" class="header_image" color="#054065" alt="" link="###" target="_self" style="opacity: 1;>
<img src="images/slider1_image_1.jpg" class="header_image" color="#17191e" alt="" link="" target="_self">
<img src="images/slider1_image_3.jpg" class="header_image" color="#3f0731" alt="" link="" target="_self">
</div>
<div class="header_controls">
<a href="#" id="header_controls_left" style="opacity: 1; ">Previous</a>
<a href="#" id="header_controls_right" style="opacity: 1; ">Next</a>
</div>
<div id="overlay_bg" style="height: 468px; "></div>
</div>
</div>
<!--/ slider -->
Quizas te interese   20 Sliders para jQuery

A continuacion te dejo un demo y el link de descarga de los archivos.

Ver DemoDescargar

Dejar una respuesta

Please enter your comment!
Please enter your name here