Submit your widget

Innovation multiaspect jquery Slide plugin

Created 13 years ago   Views 16302   downloads 3546    Author quadrrato
Innovation multiaspect jquery Slide plugin
View DemoDownload
68
Share |

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/