JQuery Slider with interior Block Elements

Question

I'm trying to build a similar 'slider' as demoed here http://ui.jquery.com/repository/real-world/product-slider/ but I'm trying to use interior divs inside of the list items (li). it seems as if this demo breaks if you're not using an image or block element (p,div,etc.)

Anyone have any quick solutions to this? I basically want to use text and possibly images inside of a div instead of using images.

I did find jCarousel which seems as if it works, but I was looking for something a little more lightweight? Any ideas?

Answer 1

I think I sort of have a working example of what you're trying to do, but there are a couple issues.

Using the example you posted as a base, you can replace the HTML markup of the LI's in a UL to be DIV's in a container DIV. For example:

        <div class="sliderGallery">
          <div class="div-that-gets-cropped">
            <div class="text-and-images-chunk">Some text!<br /><img class="pb-airportexpress" src="slider-gallery_files/pb_airport_express.jpg" /></div>
            <div class="text-and-images-chunk">Some text!<br /><img src="slider-gallery_files/pb_airport_extreme.jpg" /></div>
            <div class="text-and-images-chunk">Some text!<br /><img src="slider-gallery_files/pb_timecapsule_20080115.jpg" /></div>
            ...
          </div>

Then you modify the jQuery code in the page to target that container DIV instead of the UL:

   window.onload = function () {
        var container = $('div.sliderGallery');
        var divThatGetsCropped = $('div.div-that-gets-cropped', container);
        var itemsWidth = divThatGetsCropped.innerWidth() - container.outerWidth();
        $('.slider', container).slider({
            minValue: 0,
            maxValue: itemsWidth,
            handle: '.handle',
            stop: function (event, ui) {
                divThatGetsCropped.animate({'left' : ui.value * -1}, 500);
            },
            slide: function (event, ui) {
                divThatGetsCropped.css('left', ui.value * -1);
            }
        });
    };

Then you have some non-trivial CSS changes to make... The original example relied on the LI's being styled to display: inline, inside of a container with overflow hidden. It's going to be a headache to try to get everything to show up correctly if you just style these "text-and-images-chunk" DIV's to be displayed inline. You probably want to float them all.

BUT, floated elements won't play very nicely with the container "div-that-gets-cropped" DIV because of the way it's being "revealed" by the "sliderGallery" DIV (at least that's what I'm experiencing in Firefox 3.03). I got around this by setting a really big width for the "div-that-gets-cropped" DIV (10000 px):

        .sliderGallery div.div-that-gets-cropped {
          position: absolute;
          list-style: none;
          overflow: none;
      white-space: nowrap;
      padding: 0;
          margin: 0;
          width: 10000px;
        }

        .sliderGallery div.div-that-gets-cropped div.text-and-images-chunk {
      float: left;
      margin-right: 24px;
        }

And you'll have to tweak the "left" values for .slider-lbl1, .slider-lbl2 to match up whatever the widths end up being (this might be tricky if the size of your text ends up changing the width of the "text-and-images-chunk" elements).

The one issue I noticed is that when you have the images in a block-level element, there isn't a good way to get them to "hug" the bottom, as they do in the example using inline. You might be able to get this working by playing around with the positioning of the elements (I couldn't), but hopefully this won't be a big deal in your specific usage.

All of that said, jCarousel seems like it's intended for exactly what you're doing, even if it does add a little code bulk.

Answer 2

Check out the jCarousel Lite plugin. I've found it to be very useful and easy to configure.

http://www.gmarwaha.com/jquery/jcarousellite/index.php?#demo