Icono del sitio Pixelco Tech

Rotating Image Slider – Slideshow jQuery en forma de abanico

Rotate Image Slider - jQuey Slide Show

Tal vez suene muy reiterativo, pero todos los días me topo con algún desarrollo jQuery que me deja impresionado.

Hoy encontré Rotating Image Slider, un slide show de imágenes desarrollado con jQuery que muestra las imágenes en forma de abanico de una forma muy dinámica y vistosa.

Implementar Rotating Image Slider

........
// enlazar los archivos
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow'
rel='stylesheet' type='text/css' />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<script type="text/javascript">
.........
//HTMl que muestra el slideshow
<div class="content">
<h1>Rotating Image Slider</h1>
<div class="rm_wrapper">
<div id="rm_container" class="rm_container">
<ul>
<li data-images="rm_container_1" data-rotation="-15">
<img src="images/1.jpg"/></li>
<li data-images="rm_container_2" data-rotation="-5">
<img src="images/2.jpg"/></li>
<li data-images="rm_container_3" data-rotation="5">
<img src="images/3.jpg"/></li>
<li data-images="rm_container_4" data-rotation="15">
<img src="images/4.jpg"/></li>
</ul>
<div id="rm_mask_left" class="rm_mask_left"></div>
<div id="rm_mask_right" class="rm_mask_right"></div>
<div id="rm_corner_left" class="rm_corner_left"></div>
<div id="rm_corner_right" class="rm_corner_right"></div>
<h2>Fashion Explosion 2012</h2>
<div style="display:none;">
<div id="rm_container_1">
<img src="images/1.jpg"/>
<img src="images/5.jpg"/>
<img src="images/6.jpg"/>
<img src="images/7.jpg"/>
</div>
<div id="rm_container_2">
<img src="images/2.jpg"/>
<img src="images/8.jpg"/>
<img src="images/9.jpg"/>
<img src="images/10.jpg"/>
</div>
<div id="rm_container_3">
<img src="images/3.jpg"/>
<img src="images/11.jpg"/>
<img src="images/12.jpg"/>
<img src="images/13.jpg"/>
</div>
<div id="rm_container_4">
<img src="images/4.jpg"/>
<img src="images/14.jpg"/>
<img src="images/15.jpg"/>
<img src="images/16.jpg"/>
</div>
</div>
</div>
<div class="rm_nav">
<a id="rm_next" href="#" class="rm_next"></a>
<a id="rm_prev" href="#" class="rm_prev"></a>
</div>
<div class="rm_controls">
<a id="rm_play" href="#" class="rm_play">Play</a>
<a id="rm_pause" href="#" class="rm_pause">Pause</a>
</div>
</div>
</div>
........

Rotating Image Slider

Sitio/demo/descargar: tympanus.net/codrops/2011/04/28/rotating-image-slider

Salir de la versión móvil