Archive for 'slider'


[jQuery] Creare uno slide dei prodotti in stile Apple

Posted on 06. Sep, 2009 by daniele.

0

slider

 
<script src="jquery.js" type="text/javascript"></script>
 
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="ui.mouse.js" type="text/javascript"></script>
<script src="ui.slider.js" type="text/javascript"></script>
 

CODICE HTML

 
<div class="sliderGallery">
<ul class="items">
<li>Item one</li>
<li>Item two</li>
<li>Item three, etc...</li>
</ul>
<div class="slider">
    <!-- the handler to action the slide -->
<div class="handle"></div>
 
    <!-- labels appear against the slider, as pointers to the user -->
    <span class="slider-lb1">slider label 1</span>
    <span class="slider-lb2">slider label 2</span>
    <span class="slider-lb3">slider label 3</span>
  </div>
</div>
 

CODICE CSS

 
.sliderGallery {
    overflow: hidden;
    position: relative;
    padding: 10px;
    height: 160px;
    width: 960px;
}
.sliderGallery UL {
    position: absolute;
    list-style: none;
    overflow: none;
    white-space: nowrap;
    padding: 0;
    margin: 0;
}
 
.sliderGallery UL LI {
    display: inline;
}
 
.handle {
    position: absolute;
    cursor: move;
    top: 0;
    z-index: 100;
    /* bespoke to your own solution */
    height: 17px;…

Continue Reading

Creare Carosello infinito in jQuery!

Posted on 17. Jun, 2009 by daniele.

0

Nel link che trovate sotto troverete un "Carosello" che clicla all'infinito in stile Apple. Il trucco per farlo girare all'infinito è che bisogna clonare gli ultimi oggetti visibili, in questo modo si avrà l'effetto "infinito".

Demo: http://jqueryfordesigners.com/demo/infinite-carousel.html

Continue Reading

jQuery Page Peel

Posted on 26. Feb, 2009 by Administrator.

0

effetto page peel configurabile con jquery

Link http://www.smple.com/pagePeel/

Continue Reading