How Do I Make This JQuery Slider Render Slides Properly?

Let me first begin by saying I am new to JQuery so I am guessing my way through this, which isn't ideal but I am going to invest more time learning stuff properly. CODE:

Solution 1:

Part 1

You already have the slideLeftHide etc. functions up and running, so all you need to do is figure out a way to apply them. You could, for instance, add a currentSlide class to one of them and move that class around using the next() and prev() DOM traversal functions in jQuery. That would let you select the current slide with a selector like $("#slides .currentSlide") if you wrap all your slides in a <div id="slides">.

Part 2

You could do this with jQuery UI buttons:

$(document).ready(function () {
    $(".left_hand_icon").button().click(function () {
        $("#slide1").slideLeftShow();
    }).button("disable");
});

and then call $(".left_hand_icon").button("enable") when you want to re-enable it.

Here's a jsFiddle demonstrating the whole concept: http://jsfiddle.net/g5BA3/5/ - though the animation isn't particularly pretty.

Solution 2:

In order to resolve the first issue what you can do is:

• put all the image div elements in a parent container element, as in

<div id="container">
    <div id="slide1">Slide 1 content</div>
    <div id="slide2" style="display:none">...
</div>

• then you should apply CSS to parent container which will help you lay the given elements in proper inline manner and will form a long chain of images instead of showing one at a time.

Note: fix the width, height according to the image content, and set overflow to hidden so that rest of the images don't show up.

• next all you have to do is use the jQuery's .animate() method on click of your images (left & right) and shift the current div of [.active] div approporiately eg.

...
    $('.active').animate({
        left: '-280px';     //or the width + padding/margin of images.
    });

Coming to the second point, you can have a variable tht tracks the current object in focus (just the index) and if the index is equal to the number of 'div' elements present [$('div[id*="slide"]').length] you can disable the right button, and similarly left one for '0'th index.

Rough Fiddle for the same is : http://jsfiddle.net/vsyg8/3/

hope this helps, and correct me if I am going wrong anywhere.

Share