Innovation multiaspect jquery Slide plugin
Finalmente un plugin per jquery semplice, leggero, ricco di effetti e molto versatile.Ci permetterà di scorrere in maniera “diversa” i nostri contenuti: immagini, testo, etc.Vediamo ora come implementare il nostro slide jQuery:
<ul class="contenitore"> <li>Q</li> <li>U</li> <li>A</li> <li>D</li> <li>R</li> <li>R</li> <li>A</li> <li>T</li> <li>O</li> </ul>
Css
.contenitore{ border: solid 1px #000; height: 400px; width: 500px; background: #FFF; position: relative; margin: auto; padding:0; } .contenitore li { display: block; text-align: center; border: solid 1px #147; line-height: 135px; width: 135px; background: #FFF; color: #147; }
javascript
$('.contenitore').innSlide({ top: '60', left: '70', duration: 2000, interval: 3000, direction: 'Right' });
Parameters [EN]
- top: (int) top position of the internal container’s elements
- left: (int) left position of the internal container’s elements
-
autoPosition: (bool) compute internal element’s position where true ( default false)
N.B. top and left value where not considered. -
duration: (int) duration effect.
N.B. must be less than interval‘s value - interval: (int) time interval between slides [es, 1000 (1 sec)]
- direction: (string) direction effect ["Left-Bottom", "Left", "Left-Top", "Top", "Top-Right", "Right", "Right-Bottom", "Bottom"]
Parametri [IT]
- top: (int) posizione superiore degli elementi interni al contenitore
- left: (int) posizione laterale sinistra degli elementi interni
-
autoPosition: (bool) indica se calcolare automaticamente la posizione degli elementi.
N.B. top e left non verranno presi in considerazione. -
duration: (int) durata dell’effetto.
N.B. Deve essere sempre minore del tempo d’intervallo - interval: (int) intervallo di tempo tra una slide e l’altra [es, 1000 (1 sec)]
- direction: (string) direzione dell’effetto ["Left-Bottom", "Left", "Left-Top", "Top", "Top-Right", "Right", "Right-Bottom", "Bottom"]
The article source:http://www.quadrrato.it/blog/librerie-javascript/innovation-slide-plugin-jquery/
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form form validation gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu