如何使此JQuery滑块正确渲染幻灯片？

Question

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:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>
<script type="text/javascript">
jQuery.fn.extend({
  slideRightShow: function(speed) {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, +speed || 1000);
    });
  },
  slideLeftHide: function(speed) {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, +speed || 1000);
    });
  },
  slideRightHide: function(speed) {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, +speed || 1000);
    });
  },
  slideLeftShow: function(speed) {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, +speed || 1000);
    });
  }
});

$(document).ready(function () {
    $(".left_hand_icon").on("click", function () {
        $("#slide1").slideLeftShow();
    });
});
$(document).ready(function () {
    $(".right_hand_icon").on("click", function () {
        $("#slide2").slideRightShow();
    });
});
</script>

HTML:

<div class="navigator">

<div class="left_hand_icon">Left</div>
<div class="right_hand_icon">Right</div>
</div>

<div id="slide1">Slide 1 content</div> <!-- displayed by default and i need to slide this away when the next slide is requested -->
<div id="slide2" style="display:none">Slide 2 content</div>
<div id="slide3" style="display:none">Slide 3 content</div>
<div id="slide4" style="display:none">Slide 4 content</div>

What I need help with?

Using my JS:

1) how can i on clicking left_hand_icon or right_hand_icon make the current content slide away and then show the next one? I am using display:none; to hide them but then how do I hide the current one when it's being displayed. Can you help me head in the right direction with this?

2) When the page is loaded the first slide is showing. How can I disable the ability for the user to click the left one since we are on the firs slide and how can I do the samething for the last slide where the next button shouldn't be able to be clicked since there is no slide to be shown?

Can you help me head in the right direction with this?

Answer 1

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.

Answer 2

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.