How To: Recreate the Apple Product Slider with JQuery
Posted: September 4th, 2009 | Author: Kurt | Filed under: Web Design | 21 Comments »
Stylishly capitalize on limited space with a side scrolling image gallery, similar to the one that Apple uses to show off their products.
What is it?
The product slider is a cool way to show off something like an image gallery in a limited amount of space. You can use it for an e-commerce inventory solution or to show off photos from a recent vacation.
It’s a simple task for JQuery UI. While you won’t be using much, it does require the jquery.dimensions, ui.mouse, and the ui.slider components. Use this code snippet in the head section of your markup to take care of it.
<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>
The Markup
The HTML consists of an unordered list of items for the gallery, with labels for the slider appearing further below in the span.
<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>
The Stylesheet
.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;
}
The JQuery
$(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');
}
});
});
});
…and that will do it for you.
If you found this tutorial useful, don’t forget to subscribe to the Cherrysave RSS feed. Or, you can follow me on Twitter.
How To: Recreate the Apple Product Slider with JQuery…
Stylishly capitalize on limited space with a side scrolling image gallery, similar to the one that Apple uses to show off their products.
…
[...] Create an Apple-style Product Slider with JQuery [...]
[...] Sitio: http://www.cherrysave.com/web-design/how-to-recreate-the-apple-product-slider-with-jquery [...]
Great work. Thx
[...] How To: Recreate the Apple Product Slider with JQuery Categorías:interfaz, jQuery Etiquetas:jQuery, slider Comentarios (0) Trackbacks (0) Deja [...]
no demo?
[...] Create an Apple-style Product Slider with JQuery – Cherrysave (tags: jquery slider apple tutorial javascript gallery design code) [...]
[...] Recreate the Apple Product Slider Un tutorial pour obtenir un slider dynamique comme sur le site d’Apple. [...]
[...] Ah, Apple website. Since their latest redesign, this site is often quoted by many blogs as being a must-see in terms of design and usuability. With this tutorial, you’ll be able to reproduce Apple products slider, using jQuery. » View tutorial [...]
[...] Recreate the Apple Product Slider with JQuery アップルの製品案内風のナビゲーション [...]
[...] » Ver Tutorial [...]
No demo?
[...] Ah, Apple website. Since their latest redesign, this site is often quoted by many blogs as being a must-see in terms of design and usuability. With this tutorial, you’ll be able to reproduce Apple products slider, using jQuery. » View tutorial [...]
[...] 10. How To: Recreate the Apple Product Slider with JQuery [...]
[...] En Apple se ve un slider de todo su hardware, aquí nos proponen como hacer algo parecido. Ver turtorial >> [...]
I tried this however it did not work. I don’t know why.
http://liamdye.ca/PortfolioTest.html
By the way, in an attempt to make it work I added the overflow scroll in .sliderGallery
[...] 10. How To: Recreate the Apple Product Slider with jQuery [...]
While I hate to bash someone’s efforts to help others, reading through this page makes me wonder how much you actually thought about the kind of people you presumably wrote it for.
For one, no demo page!? This is the single biggest bugbear I see regularly on tutorial pages; why go to the trouble of writing a tutorial unless you’re going to provide a working demo for people to check their code against? How do I know your tutorial even works?
Second, you’re very vague and assuming about which version of jQuery and jQueryUI that this is supposed to work with, and also about how people go about getting the necessary components of jQueryUI. You *do* know that the jQueryUI website doesn’t let you download individual components, right? There aren’t even any components called “dimensions”, “mouse” or “slider” on the download page for you to select. How is the average user (and again, presumably your target audience for this tutorial?) expected to know how to extract these 3 individual components? There’s already one nice-looking Apple-style product gallery script out there that only works with obsolete jQuery components, whose author seems uninterested in getting it to work with the current release. Let’s not have this one suffer the same fate, eh?
Actually, scratch everything I just said. I just checked the page on jqueryfordesigners.com and your “tutorial” is nothing of the sort. You just took Remy’s code and posted it here without any credit to him.
Kind of explains a lot.
Download free web development tools