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:

html

<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"]

Versione: 1.0

DEMO – DOWNLOAD