Background
Michiel Kenis requested a tutorial explaining how to create a similar effect used to showcase the products on the Apple web site.
This 'product slider' is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff.
jQuery already has the plugins to create these effects so we don't have to go about creating them ourselves from scratch.
How to Solve the Problem
To create the slider controlled gallery, we need the following:
- Markup that allows us to place several items within a list, and that overflows out of sight.
- A slider widget to control what subsection of products we can see.
- Logic to translate the sliders position to slide the products inversely (i.e. we slide left-to-right, the products go right-to-left).
I've provided a screencast to walk through how create this functionality. Details on how and what I used can be found below.
Watch the slider gallery screencast (alternative flash version)
View the demo and source code used in the screencast
jQuery UI
jQuery UI is "a set of themable widgets and interactions". For this task, we don't need much of jQuery UI, but for the UI slider widget, we'll need the following:
- jquery.dimensions.js
- ui.mouse.js
- ui.slider.js
Of course we'll still need the latest jquery.js.
All the above scripts can be extracted from the jQuery UI download.
HTML Markup
The markup for the example is straight forward. It boils down to a ul holding the items you want in the gallery, and a div with another nested div, for the slider and it's handle.
<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>CSS
One key feature about the CSS used: in my example, I assumed that I would not have a predefined width to the ul element. As such, I can't float the li elements and have set widths. To ensure everything flows horizontally, I make use of white-space: nowrap.
I've only included the required CSS to create the sliding gallery effect. If you want to see the complete CSS used in the screencast just view the source for the demo
Slider Gallery Container
The overflow ensures the items are hidden, and the position: relative is used to absolutely position the ul element within it.
.sliderGallery {
overflow: hidden;
position: relative;
padding: 10px;
height: 160px;
width: 960px;
}Slider Gallery Items
The white-space: nowrap is what allows us to work with an unknown width in the ul element.
.sliderGallery UL {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
}
.sliderGallery UL LI {
display: inline;
}Slider Handle
In the screencast, the example uses a background image for the slider handle, and in particular from the example, the width of the handle is larger than the image to allow it to overlay on the left and right arrows.
.handle {
position: absolute;
cursor: move;
top: 0;
z-index: 100;
/* bespoke to your own solution */
height: 17px;
width: 181px;
}jQuery
As stated above, we will need to include a series of plugins from the jQuery UI download, then we will add our dash of jQuery to create the sliding gallery effect.
Required Plugins
<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>Slider Code
$(function () { // see note below
$(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');
}
});
});
});Please note during the screencast I used $(function () {}) - but I've had to since change this to $(window).ready. This is because I'm using white-space: nowrap and the width isn't calculated until after the images are loaded. jQuery's document ready function fires before the images are loaded - to allow the JavaScript access to the DOM as early as possible.
This wasn't a problem in the demo because the images were loaded from a local server, and thus loaded fast enough to allow the code to work out the width correctly.
The code breaks down as follows:
window.onload = function () {When the DOM and images are ready (note that if you don't use white-space: nowrap then you should use the standard $(document).ready() method).
$('div.sliderGallery').each(function () {Loop through all the div.sliderGallery elements. This code design sets us up to convert our code to a reusable plugin.
var ul = $('ul', this);Search for the ul in the context of this - which is currently a div.sliderGallery.
var productWidth = ul.innerWidth() - $(this).outerWidth();.innerWidth() and .outerWidth() come from jquery.dimensions.js. We're subtracting the current div.sliderGallery width because when we slide, we want it to stop once the last item is visible, rather than sliding it all the way left until it's out of sight.
var slider = $('.slider', this).slider({ .slider() comes from ui.slider.js.
handle: '.handle',The class of our slider handle.
slide: function (ev, ui) {
ul.css('left', '-' + ui.value + 'px');
},As the handle is moved, we move the ul of items, note that it moves negatively, creating the scrolling effect.
stop: function (ev, ui) {
ul.animate({ 'left' : '-' + ui.value + 'px' }, 500, 'linear');
}We use this for when slider area has been clicked, to create the scroll effect.
Taking it Further
When I have a working version of the code, I often try to think how the interaction could be better. Here's a list of ways it could be improved, in no particular order - if you fancy a challenge:
- Better scrolling effect, in particular, fast scroll for the bulk of the animation, and slows down when it's settling on the final item.
- Turn it in to a plugin.
- The arrow can be turned in to handlers to slide the handle only part of the distance, rather than all.
- A nice effect the Apple version has, is the jump labels, within the slider element, change class given the distance they are from the slider handle. They appear brighter as they're closer and duller as they are further away from the handle.
- Anything else you can think of!
February 19, 2008 at 03:54
Hi,
GREAT!! tutorial!
I havnt read it completely yet but looking at the demo version...will it be possible to make the items controlled by the slider, clickable?
thank!
February 19, 2008 at 10:59
@Jacob - absolutely. You've got license to do anything you want within the
ulelement. I just used pictures as a demonstration, you should be able add all kinds of content - text, images, links, etc.February 20, 2008 at 13:49
i want to know is there any way to grab the images from a system folder and displaying as animated image through jquery. Pls help us using jquery and (with out providing any image path in the code) and it should grab the image.Its like, if any one insert a new image in folder it should reflect in the animation.
February 29, 2008 at 21:29
Remy,
I'm playing with a mod to this. Nice work by the way. On your example, IE7 has the scrollbar above the items. In Opera 9.25, after you drag the scroller once, it locks. You can then only scroll from then on by the arrows and actually clicking on the slider bar. I was having the same Opera issue, so i just checked your example and it does the same thing. I'm still working out some positioning kinks in my test so i haven't tried to sort out Opera yet.
March 9, 2008 at 09:46
Hello, I've been going mad for the last few days about making the arrows go steps instead of all the way. I haven't been able to figure out how to do it at all: I suppose I'm missing something general about the JS syntax. Please give it a look if possible. Thanks!
March 11, 2008 at 00:32
Remy,
Thank you for this tutorial and code. I love it.
I was wondering if you know of a way to incorporate reflection.js into this gallery so I don't have to edit images each time, adding their reflections.
Whenever I try it (even when i put the header code after the slider js entries) it does not work. I have been searching for a work-around, but to no avail.
You can find a test page I created using your code here:
http://www.therealduckie.net/damian/slider.html
Some images were made in Photoshop to see what the reflection would look like. Others are just jpg’s. (please excuse the silly rap music images..it’s for a client)
I appreciate anything you can do.
Cheers
March 13, 2008 at 14:49
Any idea if it's possible to make this work with slideToggle? IE6/IE7 have problems with the absolute/relative positioning of elements of the slider, so the animation won't work properly...
March 19, 2008 at 14:48
It seems not properly work in Opera (you cannot roll slider twice).
March 21, 2008 at 04:36
Will this work?
$(document).load(function() { // startup code here })
April 4, 2008 at 02:22
Hi,
nice script, but in IE7 the slider bar is over the images and in opera the slider can´t "drag&drop".
April 10, 2008 at 09:39
Hi Remy,
I love your blog! The Slider Gallery and Image Loading were exactly what I was looking for. I find screencasts extremely useful and easy to understand than reading tutorials. Its also nice that you don't edit out the debugging process as it helps us to learn and look out for similar problems in our own code. Its very refreshing to hear a British voice too (most of the ones I've watched were American). Keep up the good work, I'll definitely be keeping my eyes peeled and waiting eagerly for your next post.
Best wishes, Sim
April 11, 2008 at 17:15
Hi! very impressed by this tutorial.
I tried to do the same with a vertical slider and .... failed.
if, by chance, you have a couple of minutes to spend on it, here is the page i am struggling with since too many days.
Thank you
http://a_renaut.club.fr/slider/index.html
April 12, 2008 at 01:02
Please forgive my ignorance, but do I need a license to use this? Or under what license is this?
Thanks.
Rob.
April 12, 2008 at 13:20
@Rob - no license is required. However, I wouldn't recommend using the style directly from Apple. Make it your own and make it even better! :-)
April 14, 2008 at 18:20
Great tutorial. But there's one thing that makes this one inferior to the one used on Apple's site - accessibility and graceful degradation.
If you go to Apple's site and disable Javascript, the fancy scrollbar disappears, and you see a regular scrollbar. So it's still functional without js. With this one, disabling js renders it useless.
April 14, 2008 at 19:36
@Dean - thanks - that's an important point.
I would always advocate starting with JS and CSS turned off and working your way from there (for the screencasts there's quite a bit of work behind the preparation, and since I'm demonstrating the jQuery side it's not always practical).
However! Thinking about it, to make this solution accessible, the overflow on the UL should be set in the JavaScript, and the DOM elements that make up the handle and slider navigation should also be built in JS - that way it should degrade without JS. Next stop - checking it without CSS!
I've been toying with the idea of adding a preface to the site that states that as designers you should start with the accessible working version, and only then should you start applying the "whizz-bang" :-)
April 14, 2008 at 20:25
Hi Remy! Thanks for your response!
I'm confused since the download package JQUERY UI DOWNLOAD comes with two licenses a GPL and a MIT one. So which one should I take into consideration especially since I'm using this on a commercial site?
Thanks for your help!
April 14, 2008 at 22:35
Hi Remy. I think I've got a handle on how to make it degrade gracefully. The problem I'm having now is making it work with a table inside the sliderGallery, rather than a ul. Changing the references in the js from "ul" to "table" doesn't seem to do it. Any suggestions?
April 16, 2008 at 10:12
Hi great stuff,....I successfully reverse engineer it to make it work for my project (with a little addition) Thank You So Much for this tutorial.
Quick question: How can make the arrows next to the scroller work? Clicking it would make it slide one image at a time...Thanks again
April 18, 2008 at 01:40
Awesome work Remi! Now how about all the other goodies on the Apple site? Can't wait.
I'm looking for some kind of slider/slideshow thing I can use for switching videos in a div, and I'm gonna see if I can make this slider work for that.
April 19, 2008 at 21:17
Hi Remy. Great tutorial! I've been playing around with this for a few days (first introduction to jquery and js for that matter). What I can't figure out is:
1.. How to slide the handle on mousedown instead of mouseup.
2.. How to highlight the labels as the handle gets closer.
Thanks.
April 24, 2008 at 10:25
Hi, this is superb, thank you Remy.
Quick response to Alan and Markus's comments about the scrollbar appearing above the images in IE7.
If you just play with the css to fit your own design you will be able to easily overcome this problem.
Alternatively for testing purposes, you could simply add a blank tag () above the slider class in the html. This should do the trick.
Cheers,
Simon B
April 24, 2008 at 10:27
ammendment to last post . . . it should read a blank div tag.
April 25, 2008 at 17:19
Hi Remy. Great tutorial! I not speak english very well. I have a question for you, how put text on [<div id"sliderGallery" - <ul></ul>] not images only text content. I experiment but not work very well. I need change the css codign? Please, help me.
Thank you so mouch.
Abraços from Brazil,
Dan
May 6, 2008 at 17:47
Hi,
First, thanks for the excellent tutorial!
I think I've found a solution for the problem that some of the earlier posters mentioned with the slider/handle positioning in IE6/7. In the CSS, if you change this:
.slider { width: 542px; height: 17px; margin-top: 140px; margin-left: 5px; padding: 1px; position: relative; background: url(images/productbrowserscrollbar20070622.png) no-repeat; }
to this:
.slider { width: 542px; height: 17px; padding: 1px; position: relative; top:140px; left:5px; background: url(images/productbrowserscrollbar20070622.png) no-repeat; }
It should fix the problem.
In terms of a wishlist for improvements, I'd love it if the size (width) of the slider handle adjusted automatically based on how many items are in the carousel. But that's for someone smarter than me to figure out.
Cheers!
May 6, 2008 at 19:15
Does the window.onload function conflict with the $(window).ready event handler? I've noticed that in some libraries it will... I just haven't tried it yet...
May 7, 2008 at 22:50
@Chris - the answer is yes, but in fact the best method is to use
$(window).readysince this is different from$(document).readybecause it fires once the images are loaded - which is what we want (I only recently found this out).May 18, 2008 at 14:47
Hi! I love that tutorial. Can you make a "full code" of this? Or even a .zip-file for download?
I love that script, but I set it up, and it woudnt work.
:)
May 21, 2008 at 15:52
Awesome job!
After watching your screencasts, i don't think it "Simple stuff." anymore
May 23, 2008 at 14:09
It tooks me quite a long time to make that work. I figured out why: as overflow:none is not a valid CSS property, I replaced it with overflow: hidden. This was working on FF3 and Safari but not on FF2 or IE7
Thks
Axel
June 3, 2008 at 04:10
Great tutorial! Thanks
June 5, 2008 at 17:23
How do you make this thing auto scroll initially?
June 5, 2008 at 18:50
thanks for this man; i recently started to learn JS and tutorials like this make it so much easier
June 12, 2008 at 02:39
hey nice one take a look of mine http://www.tanicos-webbdesign.com/forums/
June 16, 2008 at 09:03
To make it work with the new UI-Release, change the params
"minValue" and "maxValue" in the options to "min" and "max"
just a tip :)
greetings from germany.
nice tutorial, thank you!
June 18, 2008 at 12:58
Thank you for this great tutorial!
Is it somehow possible to start with an initial value for the slider or the list? Just like http://www.apple.com/mac/ where it starts with "Macs"?
June 18, 2008 at 13:03
Ok, got it:
$('div.slider',container).slider("moveTo","250px");
June 21, 2008 at 20:04
Excellent tutorial!!!
I am just getting into jquery and am absolutely loving it. It's great to have such extensive tutorials like this around on the web.
Your time taken to put such tutorials and code together is greatly appreciated!
R.
June 24, 2008 at 16:06
Great Job! Thanks for posting this.
Has anyone used this slider gallery together with traditional expandable menus. In other words, use the slider to scroll through all first level menu categories and then click on one to see it drop down and display the 2nd level for the selected menu?
Thanks, S.
July 1, 2008 at 07:39
Very interesting tutorial. JQuery it's a fantastic solution for unobtrusive javasript.
Thanks
July 1, 2008 at 08:36
That's a fantastic solution for developing emotional navagation system without using Flash. It's a technique that provides Search Engine Optimization and accessibility. Great job! Greetings from Italy!
July 2, 2008 at 03:49
I am trying to figure out how to have the page open with the slider in a certain position. I am guessing that I should use the moveTo (class? function?) from ui.slider.js but i don't know the syntax to call it. A bit of a js newbie here.
July 2, 2008 at 04:26
I see Lars says to use
$('div.slider',container).slider("moveTo","250px");
but I am not sure how or where to use it.
July 2, 2008 at 04:45
I see Lars wrote to use
$('div.slider',container).slider("moveTo","250px");
I am not sure how or where to use it. Help?
July 14, 2008 at 10:11
Instead of "250px" you could also use "container.outerWidth() / 2" for example. This would move the Gallery to its middle...
July 15, 2008 at 14:09
Hi,
I am using this script for a page but with a small description below each image. The moment we add block elements (div / p / h1?) the script goes haywire. Without a block element I cant add the width property within which the text will flow. Any suggestions?
Remy plspls reply to this one!
July 15, 2008 at 20:02
Hey Guys/Girls-
Just wanted to share two fixes I made when doing my iteration of the drawer for my project (see site).
1) I use MooTools for my left sidebar accordion but that library was interfering with jQuery. All I had to was change all occurrences of "$" with "jQuery" in the internal javascript. Simple fix.
2) Firefox 2 wouldn't show my entire UL for some reason. So I just applied "width: 1550px;" to ".sliderGallery UL" to get it to work.
Thanks to the author of this tutorial. I made sure to credit you in my global credits file.
~Kyle~
July 18, 2008 at 17:40
Hi there, which components should I select with new jQuery UI download builder? http://ui.jquery.com/download_builder/
July 22, 2008 at 19:23
Has anyone gotten this script to work in IE6?
July 28, 2008 at 14:28
Anyone having trouble with IE7? The slider handle moves but the gallery images do not. I made several adjustments already mentioned above ('overflow:none' changed to 'overflow:hidden' and minValue/maxValue changed to min/max). Oddly enough, it works in IE6, FF, and Safari. Thanks!
July 28, 2008 at 14:45
I'm working with jquery 1.2.6 and UI 1.5.2. Has anyone had success with these newer versions in IE7?
July 28, 2008 at 19:25
IE7 now working! For anyone interested, I resolved my issue using jquery 1.2.6 and UI 1.5.2.
I removed 'overflow:none' from sliderGallery ul { } and now it works in IE6/7, FF, Safari. CSS is now valid too!
July 28, 2008 at 19:49
This is great, especially nice with the screencast. I'm wondering about incorporating with ajax functionality. Basically, the same but dynamically and proportionally resizing the scrollbar depending on the amount of content. Anyone have any tips/suggestions?
July 29, 2008 at 16:09
Love the script! One thing though: what is that blue little thingy which appears in the Opera web browser? Anyone else noticed it?
July 29, 2008 at 16:26
Here's a picture of what I see in Opera 9.51:
http://picpanda.com/viewer.php?file=hmzu2ftnqsmpobng8vrh.jpg
July 30, 2008 at 16:05
I've managed to pt all togheder, but the slider bar is not moving and so the images. Everything is static, what can i do?
August 1, 2008 at 09:55
Great tutorial! One question, the slider is not moving when clicking on the slider while on a category (it only moves when clicking in the scrollbar or when selecting it directly on the slider (and not when the slider is "behind" a category name)....
Anyone knows a solution?
August 1, 2008 at 15:15
This now works on Safari, Firefox and Explorer. The slider does not work on an old AOL version 10.3.7 for Mac. Great Tutorial and thanks to Lief for the scripting that makes it work in Explorer.
August 5, 2008 at 12:54
Great Tutorial! I've extend the Script with a "Stepping"-Button.. Works fine in FF.. but in IE6 and IE7 it still works when i dragged the handler. maybe someone has an idea...
heres the js..
...and the html
August 5, 2008 at 13:33
@leif, try sth. like this
.slider a{ color: transparent; }
August 5, 2008 at 18:28
@ Yosh Thanks, but it didn't help. Weird thing is that blue thingy only appears when I a) click somewhere in the slider field, or b) click either the start or end button, NOT when I move the slider with the mouse. It's a real shame it happens, although I'm going to use the script anyway because it's so cool. Just a bit surprised it happens in Opera, usually it's IE that's giving me headaches... ;-)
August 6, 2008 at 12:28
Thank you very much for this tutorial - there are so many opportunities with this. I hope you can help me with something I find complicated, since I am new with JQuery. I am making a portfolio, and want to have a page with this gallery, and links which only change the content of the gallery.
So far I've tried to put the content (the UL's and the slider+handle) in seperate div's, with a class either contentshow or contenthide. The links call a function wich change the classes, and shows the current content. And it does change the content - but: The sliderhandle and the content doesn't follow eachother. If I have slided through the first content (say 200px to the right), then, when I follow the link to the next content, the handle will be reset, but the new content will already be slided these 200px. I am not sure of what I need (am very new to JQuery and the script was made by a friend), but maybe something that resets the sliding when i change content?
That was a long description, I know, but after googling my fingers off, I really need som help! Thanks!
PS. I haven't got the site on a server yet, so I've put the code-pieces I've added here:
Example of two different contents (I will be needing many more!):
The CSS:
.content_show { display: block; }
.content_hide { display: none; }
The links of these to different contents:
And the script to go with it:
function changeContent( contentid ) { document.getElementById('divArkitektur').className='contenthide'; document.getElementById('divDesign').className='content_hide';
document.getElementById(contentid).className = 'contentshow'; }
August 6, 2008 at 13:11
hi leif, i've had the same in FF (2*2pixel)
In FF and Opera 9.51 it looks fine now.
maybe try this in your stylesheet to hide it (..) a{ color: #fff; border: 0px; }
August 6, 2008 at 21:21
Yosh: I think it's something in one of the .js files that's causing the problem. I tried a few other css variations to get around it, but no luck. Weird though because I too use version 9.51 of Opera. I even tried uninstalling and re-installing Opera, but it didn't help. Guess I'll just have to live with it. The script seems to work fine in IE, FF and (on a Mac) Safari, so 3 out of 4 isn't too bad! ;-)
August 11, 2008 at 22:09
"we removed the jquery.dimensions.js (which can now be found in jQuery core), the ui.mouse.js and the *.ext.js dependancies, introduced a ui.core.js (which includes many useful helpers) and created the jQuery UI widget factory which makes creating a new plugin for UI amazingly simple while making it very difficult to break the API."
http://www.wittysparks.com/2008/06/10/jquery-ui-focusing-more-on-api-plugins-themes-and-effects/
August 17, 2008 at 02:25
Yosh, do you have the css to go with your stepping buttons? I'm having some trouble getting it to work correctly. Thanks.
August 19, 2008 at 03:19
how can i move the carrousel step by step like the apple page???
August 21, 2008 at 18:25
I'm also trying to implement a " stepped" slider
August 24, 2008 at 05:42
For Internet Explorer....
I found that in Firefox and Safari it worked great. The problem is, 90% of the people that will be visiting the website I am putting it on will be using IE7 (with a few using IE6 since MS forced an IE 7 update).
If you load the Demo page for this slider gallery above in IE7, you will see the slider bar is above the images (and covering them up). I was having the same problem.
The fix was super simple to get it to look right on all browsers.
INSTEAD of using a TOP MARGIN to push the bar down from the top (which is how it is set up)...use POSITION Relative and set TOP to the desired number you were using under margins before (get rid of margins).
It was mentioned earlier, but I wasn't so sure it was crystal clear.
So in your .slider css definition
INSTEAD OF Margin-top 268 (in my case that's what it was)
USE top 268 (get ride of Margin- ). That should solve any issues as to the placement.
Hope that helps
September 3, 2008 at 14:48
Realtor Ben.....
Thanks very much for your post, you were right, it wasnt very clear earlier and the positioning has finally been sorted.
But the only problem I am having now after all the effort of getting it working is that IE7 wont allow the images to slide along with the handle. The Handle moves on its own and the images stay put.
Has anyone worked out how to fix this problem? I think my brain is actually fried after trying for so long to get this sorted! :)
Any Ideas would be greatly appreciated.
September 4, 2008 at 06:33
Does anybody know how to make the slider change in speed like in the apple website (www.apple.com/mac) when you click on a category?
Also, the script that Yosh provided for the stepping buttons, does that work good now? Or does it need some changes still? Else I would love to use it as well.
September 4, 2008 at 06:41
hi, could you suggest how this can be done for the vertical slider. Am trying to tweak the code for the vertical slider and havent made much progress :-(
Any help is appreciated. Thanks, olives
September 24, 2008 at 05:23
I am also after a vertical version of the slider has anyone done one of these yet?
Cheers
Mart
September 24, 2008 at 15:53
For a vertical slider, change var itemsWidth = ul.innerWitdth() - container.outerWidth(); to:
var itemsHeight = ul.innerHeight() - container.outerHeight(); Basically dimensions.js supports width and hieght, so you have to change the references of width, to height in the slider.js file. And you have to change the respective values of the containers in your stylesheet as well.
Now, I'm trying to -rewrite this so that it works as a vertical slider, without the "handle", so that the slider only moves, in increments, when a user clicks the up and down arrows. However I have been unsuccessful in this venture so far. I will post some solutions when I work out all of the bugs. I have gotten the slider to work vertically though, just fine.
October 3, 2008 at 10:23
Hi
I am having small trouble in getting this to work. My scroller container div is initially hidden. The scroller does not work i.e the handle does not move. However if the scroller container div is initially visible, the scroller works. Is there a workaround so that the scroller works even if its hidden initially?
October 8, 2008 at 21:44
Hi, I'm getting a margin on the list items. I have set both the margin and padding to zero. It seems to be the white-space : nowrap that is causing it. I was wondering if there were any ways of getting rid of that?
October 9, 2008 at 21:09
If you're having trouble getting this to work with the latest jQ and the jQUI try the following:
maxValue and minValue have been changed to max and min, respectively.
The slide: function (ev, ui) { ul.css('left', '-' + ui.value + 'px'); } callback will cause your slider to jump before smoothly scrolling when you click somewhere in the scrollable area (without dragging). The following callback solves that:
slide: function (ev, ui) { ul.animate({'left': -ui.value + 'px'}, 1); },
October 13, 2008 at 21:36
this is great! is there any way to make the image slide to the next one when you click on it??
October 20, 2008 at 15:19
i have seen its similar from google's teenth year page.
October 21, 2008 at 14:56
Thanks for the tutorial, works really well and is REALLY easy to install, keep up the good work.
October 21, 2008 at 15:29
download personalized jquery ui (core + slider)
modification to move incrementally: (see Yosh above)
$(".control.prev").click(function(){ $('.slider', container).slider("moveTo","-=250px"); });October 29, 2008 at 09:35
thanks!!
everyones improvements and suggestions are great!
thanks to dix, RealtorBen, Leif Miltenberger and everyone else!
great tutorial!!!
October 29, 2008 at 14:04
Is it possible to drag and drop the images out of the slider i.e. into a cart? I have attempted this but it will not drag out of the sliderGallery div bc of the overflow: hidden style.
October 29, 2008 at 18:45
This is a great script. But i've got a couple of issues:
In response to Anthony's post 'For a vertical slider, change var itemsWidth = ul.innerWitdth() - container.outerWidth(); to:
var itemsHeight = ul.innerHeight() - container.outerHeight();'
I am having trouble getting the above to work. If possible, can someone post the whole script with the necessary modificationso I can copy and modify it to my pwn needs?
Another question: Is there a way to put more than one of these sliders on a page. For instance, 3 per page, each one 50px below or besides the other?
October 30, 2008 at 02:41
In IE 7 the slider bar ignores the margin-top. Use (top: 100px;) instead, and it works in all browsers. :)
November 5, 2008 at 03:09
Hi Dear Remy it's really an amazing blog and demonstration I got one question here, the slider does not consider the padding of the container, therefore, it will move to the left more than before, any solution?
November 13, 2008 at 10:19
excellent job... remy... keep it up. i haven’t tried this yet. But the way you explained is very good.
November 26, 2008 at 21:43
I have read a couple posts asking about compliance with Opera. I have gotten the script and CSS to perform exactly the same across all browsers (opera, ie6. ie7, ie8, ff, chrome).
The Problem from my end was an undefined ul width. If left undefined Opera will use a width based on the slider width and push any li elements down the frame (below the slider and partially out of view). For prototype reasons I have just defined the width based on the contents of the ul.
December 5, 2008 at 20:38
I might have a solution for Opera users but it requires that you use jQuery 1.2.6 and jQuery UI 1.5.3. Using these versions would only require you to use "jquery-1.2.6.js" and "jquery.ui.all.js" within the "ui" section of jQuery UI 1.5.3.
The issue seems to be in jquery.ui.all.js within the Slider function. It appears to be a bind function found on line 6668. The "type" is entered as "mousedown" which works in FF 2+, IE 6+ and Safari 3.1.2 (all Windows XP SP3). However testing on Opera 9.02 produces an interesting result. Clicking on the "handle" will initially produce the desired result. However, releasing the handle and then clicking it once again causes the handle to remain static. Clicking anywhere else on the screen (other than the handle and slider) will allow you to once again click on the handle and operate it accordingly.
The current, albeit premature solution that I've come to appears to be changing the "bind type" to "click" within the Slider function on line 6668 once again. This produces the desired effect in all aforementioned browsers. Again though; I've done limited testing. I'm using browser detection to alter the function for Opera users only. Everyone else will still use the same function unaltered.
December 5, 2008 at 20:41
Oh, and Remy, this is absolutely brilliant. Thank you very much!
December 6, 2008 at 23:38
Hi! Thanks very much for this excellent jquery use. I've a problem with IE7. It works with FF2 FF3 ie6
IE7 only says : Argument not valid on line 1120 the line is this: elem[ name ] = value;
Please help me, I've spending a lot of time... googling... coding.. but I can't fix it.
URL : http://estudio.seaweb.es/ecaps/Montaje%20Web/ I use jquery 1.2.6 Thanks again.
December 7, 2008 at 00:26
Ufff! finally I fixed it!.
At some moment I replace the overflow: none with overflow:hidden like Alex... SO ALERT ! don't change overflow:none; with overflow:hidden; Remove if you want but don't change.
:)
Thanks.
December 10, 2008 at 01:15
Thanks for the informative post. I am going to have to try this out. I have basically been using plugins within my CMS to achieve this sort of gallery, but of course those are always limited to what that developer put into it. I hope to be able to customize my own with this technique. I will let you know how it turns out.
December 12, 2008 at 18:59
Nice tutorial !
Is-it possible to add text behind each image of the slider ? I tried to put some text in the <li> but the scroller exploded...
December 12, 2008 at 20:28
Very nice. That is incredibly simple. Excellent tutorial. Nice job.
December 23, 2008 at 11:45
-Remy, Great work. Very neat. Cheers. -Chad, I don't know if you found the answer to your question, so I thought I'd try to help as I've just been through the same thing over the past couple of days. You need to change the "appendTo" property of the draggable element. By default jQuery appends the element to the parent of the original element. Add a new element to your page structure (setting a higher z-index than the other containers) and append the draggable to this element. You'll also probably want to resize the elements in your source element area after you've dragged them onto your cart. The only way I found to do this was by destroying the slider and recreating. I don't know if there is a better way to do this. Chris