Slider Slidorion

Slidorion es una combinacion de Slider de imagenes con una caja de informacion con efecto "accordion", hecho con JQuery.

Para implementarlo en nuestra web, vamos a la plantilla y antes de </head>, pegamos el siguiente script:

<link href="http://hostredeando.ucoz.es/SCRIPTS-BLOG/Slidorionslider/slidorion.css" rel="stylesheet"></link> <script src="http://hostredeando.ucoz.es/SCRIPTS-BLOG/Slidorionslider/jquery.min.js"> </script> <script src="http://hostredeando.ucoz.es/SCRIPTS-BLOG/Slidorionslider/jquery.easing.js"> </script> <script src="http://hostredeando.ucoz.es/SCRIPTS-BLOG/Slidorionslider/jquery.slidorion.js"> </script> <script> $(document).ready(function(){     $('#slidorion').slidorion({         speed: 1000,         interval: 4000,         effect: 'slideLeft'     }); }); </script>

Ahora, alli donde queramos mostrar este slider, pegamos el siguiente codigo HTML. Modificando lo que esta en rojo para poner el contenido que queramos:

<div id="slidorion">
 <div id="slider">
  <div class="slider-image" rel="section1">
   <img src="IMAGEN" width="500" height="400" />
  </div>
  <div class="slider-image" rel="section2">
   <img src="IMAGEN
" width="500" height="400" />
  </div>
  <div class="slider-image" rel="section3">
   <img src="IMAGEN
" width="500" height="400" />
  </div>
 </div>
 <div id="accordion">
  <div class="header"><a class="slider-link" rel="section1">TITULO FOTO</a></div>
  <div class="content">
   <!-- CONTENIDO RELACIONADO CON LA IMAGEN 1 -->
  </div>
  <div class="header"><a class="slider-link" rel="section2">TITULO FOTO
</a></div>
  <div class="content">
   <!-- CONTENIDO RELACIONADO CON LA IMAGEN 2 -->
  </div>
  <div class="header"><a class="slider-link" rel="section3">TITULO FOTO
</a></div>
  <div class="content">
   <!-- CONTENIDO RELACIONADO CON LA IMAGEN 3 -->
  </div>
 </div>

Para ver una demostracion de como queda, pulsad el boton.

ver demo