sastgroup.com

[jQuery] Creare uno slide dei prodotti in stile Apple

Posted on 06. Sep, 2009 by daniele in guide per il web, javascript, script ajax, 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;
    width: 181px;
}
 

CODICE JAVASCRIPT

 
$(window).ready(function () {
  $('div.sliderGallery').each(function () {
    var ul = $('ul', this);
    var productWidth = ul.innerWidth() - $(this).outerWidth();
 
    var slider = $('.slider', this).slider({
      handle: '.handle',
      minValue: 0,
      maxValue: productWidth,
      slide: function (ev, ui) {
        ul.css('left', '-' + ui.value + 'px');
      },
      stop: function (ev, ui) {
        ul.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear');
      }
    });
  });
});