Search

Slider Gallery

Posted on 18th February 2008 — 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:

  1. Markup that allows us to place several items within a list, and that overflows out of sight.
  2. A slider widget to control what subsection of products we can see.
  3. 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:

  1. Better scrolling effect, in particular, fast scroll for the bulk of the animation, and slows down when it’s settling on the final item.
  2. Turn it in to a plugin.
  3. The arrow can be turned in to handlers to slide the handle only part of the distance, rather than all.
  4. 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.
  5. Anything else you can think of!

Related screencasts

  1. Coda Slider Effect Although Panic didn’t really invent the effect, the sliding panels...
  2. Image Fade Revisited This episode is revisiting the image cross fade effect, in...
  3. jQuery Infinite Carousel With jQuery for Designer’s redesign I decided to add a...

Demo

If you find this demo doesn't work as expected, it's possibly due to the demo running from within an iframe. Try running the demo in it's own window.

Source Code

Comments

1 ... 5 6 7 8 9 10

  1. Kathleen On 29th May 2009 at 23:05

    Hi, I’ve been trying to implement this, and for some reason, the handle will move, but the ul won’t. Any idea why that might happen?

  2. dallas On 30th May 2009 at 08:05

    hi. i have been having trouble implementing the slider. i have it working now but the problem is that when i slide the handle the ul moves a bit, but not the full length. i have added console.log messages for itemswidth and it is calculating just fine at like 4500 wide. however it only scrolls the ul about 100 (maybe) based on the console.log for ui.value in slide.

    here is my page…. maybe you can see something in it. i have a feeling it has to do with versions of jquery and your dimensions.js file? (just a guess since i found it was different in the example, than what i downloaded)

    thanks, dallas

  3. dallas On 30th May 2009 at 08:05

    oops. sorry about that chief. maybe you can just dump the code and leave the message. or remove the message and let me know if there is any hope. thanks again.

  4. Krittiya On 1st June 2009 at 18:06

    Does anybody find a solution for this to work with jquery-1.3.2.min.js and jquery-ui-1.7.1.custom.min.js ?

  5. dallas On 2nd June 2009 at 16:06

    I have viewed and saved the source from the demo. i was also able to download the old scripts because they are called in the source using the following urls: //jqueryfordesigners.com/demo/jquery-1.2.6.js //jqueryfordesigners.com/demo/jquery-ui-full-1.5.2.min.js

    tried to run but did not work because no call of the three javascripts mentioned in the tutorial that are included in the jquery.ui-1.5b. * jquery.dimensions.js * ui.mouse.js * ui.slider.js after adding those the page operates identically to mine. the slider does not slide all the images in the UL.

    replaced the old jquery with the new jquery without change. (1.2.6 with 1.3.2) (1.5.2 with 1.7.1).

    the three js scripts above are not listed in the online demo source. where is it getting those scripts from? how does it work without the calls to get the scripts listed in the code? i have a feeling that the three scripts you use in the demo may be different than the ones you allow us to download.

    why do i think that: 1) i cannot confirm the three scripts since i cannot determin where they are called into the source. 2) ive replaced all other called script files used without a difference. 3) the “itemswidth” field has a valid length before running the slider function. 4) the slide function only moves a maximum of 100 pixels/units for the full length of the slider.

    so bottom line is i can duplicate the problem with the source code from the demo page and all the code i can get my hands on does not change the operation of the page. the 3 scripts included in jquery-ui-1.5b are the scripts i cannot change and appear to be the location of the logic that causes the difference in operation. can this be the problem?

  6. dallas On 3rd June 2009 at 06:06

    found it! the problem is that the ui.slider.js file is expecting fields named “minValue” and “maxValue” and is being sent fields named “min” and “max” respectively. That is if you used the slider code in demo page. However if you used the slider code listed in the tutorial it would already be sending the correct field names.

    In the slider code window.onload function change the lines: 

                min: 0,

            max: itemsWidth,

    to these lines:

                minValue: 0,

            maxValue: itemsWidth,

  7. greg On 6th June 2009 at 06:06

    hey,

    I was trying to get your slider working. I have tried multiple solutions.

    Its weird cause, after many unsuccessful attempts, I opened the demo only page and copied the source. I replaced the list items with a line of text and changed the three css images to image i have. I have the latest copy of jquery and jquery-ui. The problem i run into is that the slider handle itself does not move with the slide.

    I have copied the source directly with the same results.

    Do you have any idea why this is not working correctly? After many attempts to get the slider working the issue still lies that I cannot get the handle to move with the slide…. i am stumped.

    Thanks for your time, and hopefully we can get this tutorial working.

    -Greg

  8. Zuber On 7th June 2009 at 18:06

    Hi Thanx for tutorial I am using this on mysite I haven’t edited it yet, I am trying to set it up. I am getting some kind of error in between this is my site link www[dot]amazingsanantonio[dot]com if you look between each photos there is little white box or white x how do I get rid of those

  9. Hannah On 8th June 2009 at 08:06

    Hello.

    I’ve got the same problem as Kathleen, but the weird thing is: my gallery did work before. I didn’t change anything in the Javascript (as I don’t really know anything about it) and I can’t imagine it’s an HTML/CSS problem. I checked and double-checked. What’s wrong?

    ~Hannah

  10. Rafael On 8th June 2009 at 21:06

    Hi again Remy,

    I posted about a month ago, asking about how to implement it into a shopping cart, which uses php, tpl (for the template) and css.

    Could I get these files so I can try to implement it into my website please? I’ve managed to make it work, but only 50%, because the handler, arrows and categories don’t work.

    Thanks.

  11. hiKrittiya On 13th June 2009 at 05:06

    If you use jquery-1.3.2.min.js and jquery-ui-1.7.1.custom.min.js, you will find that the handle does not move as you scroll.

    In jquery-ui-1.7, ‘handle’ option is depreciated. (http://jqueryui.com/docs/Upgrade_Guide#Slider)

    To fix this problem,

    in html, change the class name of the div from handle to ui-slider-handle

    and in css, change selector from .handle{ } to .slider .ui-slider-handle {

    }

    I get the handle moving now.. but the animation is still wonky..

  12. Nick On 14th June 2009 at 17:06

    Does anybody know how several instances of that slider on one page work?

    thanks

  13. Moritz On 16th June 2009 at 11:06

    Today I wrote a tutorial how you get the slider working with jQuery 1.3.2 and jQuery UI 1.7.2 but at the moment it is only available in German. When I have some more time I will translate into English but maybe you can help yourself with the German one: http://place-of-interest.ebytenet.com/scripts/html/imageslider

    To fix the problem with the animation you have to edit the ui.slider.js:
    1. Go to line 360: 

    var allowed = this.trigger("slide", event, {
    handle: this.handles[index],
    value: newVal
});
    2. Change it to: 
    if(event.type   == 'mousemove') {
    var allowed = this.trigger("slide", event, {
        handle: this.handles[index],
        value: newVal
    });
}

    The request prevents the slide function from being triggered if you click on the slider.

    It is no problem to use more than one slider but everyone has to have another id.

  14. hiKrittiya On 17th June 2009 at 20:06

    @Moritz, Thank you! Can you please upload the source code?

  15. hiKrittiya On 17th June 2009 at 21:06

    I tried @Moritz solution and it works. Thanks again!

  16. Moritz On 18th June 2009 at 10:06

    No problem. Look again at the page, I added a link to a demo and a link to download the source code. Also I am open for any bugs you find or new ideas what I could make better in the slider. Just tell me.

  17. Sarah On 19th June 2009 at 23:06

    Hi Moritz,

    I was wondering if you can check out my slider and figure out why I can move the scroll bar right and left, but the images are not moving.

    I’ve read back the last few pages, and I’ve seen a couple of people voice the same problem that I’m having, but I’ve seen no fix.

    Just so you know, I’m using the jquery 1.32 and jquery-ui-full-1.7.2.min.js.

    Here is the link to my site: http://web.bethere.co.uk/urwayormine/trial.html

    Thanks in advance!

  18. Moritz On 20th June 2009 at 21:06

    Hi Sarah, the problem is really simple and I thought someone explained it already but never mind ;-)

    In this version of the jQuery framework there is not the option “handle” anymore. Just remove in your code and then the slider should move again.

    If this should not help you do not hesitate and ask me again then I will take a closer look on your code.

  19. Moritz On 21st June 2009 at 07:06

    Ok, what I said about the option “handle” is not wrong but it is not the solution for your problem.

    I think you forgot to include somefiles of the framework. For example the file “jquery-ui-full-1.7.2.min.js” does not exists but you try to use it. Also I do not know this file, where did you download it?

    The files I use are:
    - development-bundle/jquery-1.3.2.js
    - development-bundle/ui/ui.core.js
    - development-bundle/ui/ui.slider.js

    And the style file for the handle:
    - development-bundle/themes/base/ui.all.css

    Please double-check all your files and may change it with the files I listed above.

    Greetings from Germany

  20. Ryan Gahl On 22nd June 2009 at 15:06

    Just FYI - the demo does not work in FF 3

  21. Ryan Gahl On 22nd June 2009 at 19:06

    OK, clarification - the demo does not work in FF 3 when I click the “Try Demo” link at the top and the demo is loaded into the main content area underneath. When I click the other link that’s in the article that takes me out to another page with the demo, it works there. So something with the site’s layout (or code) is messing with the demo. FYI

  22. Sarah On 24th June 2009 at 12:06

    Hi Morris,

    Thanks for you response.

    Firstly, you asked me where I got the “jquery-ui-full-1.7.2.min.js” file from. Well I downloaded it from some website after a google search, a poster in the comments section said donwloading it would make the slider work.

    I took your advice, downloaded all the files you said I should- exluding the ui.all.css style, because I can’t find it. Yet the slider still doesn’t work.

    For some reason, you yourself haven’t included the “ui.mouse.js” js file. When I delete this, this makes the slider worse, so although you haven’t included it, I’ve left it in there.

    Here is the page again: http://web.bethere.co.uk/urwayormine/trial.html

    Thanks and I hope to hear from you again

  23. dmw On 24th June 2009 at 16:06

    I’m new to jquery (and .js in general.) I got this slider gallery to work correctly. Now I’m trying to add a Shadowbox effect so that clicking on each item in the gallery makes it bigger.

    But so far, implementing one breaks the other. (Shadowbox doesn’t fire, or the slider doesn’t slide. I’ve made them both work separately.)

    Since I’m a newbie, I could be screwing up the code, but since I’ve never seen a working example of the two scripts together, I just want to know if it’s possible.

    The code to make it happen would be gravy.

    Thanks.

  24. Moritz On 24th June 2009 at 20:06

    The ui.mouse.js is since version 1.x in the ui.core.js included. Could you please send me your whole directory with the files so that I can better check where the mistake is?!

  25. Sarah On 24th June 2009 at 23:06

    Hi Morris,

    I have the latest ui.core.js yet when I delete the ui.mouse.js file, the slider then is unable to move, so I’ve kept it.

    As for my directory, you should be able to see the source files of my webpage. But here are the files for you anyway:

    The above are the JS files I have uploaded.

    Thanks

    http://web.bethere.co.uk/urwayormine/trial.html

1 ... 5 6 7 8 9 10

Comments are now closed.