jQuery Imageslider问题

Question

I am following this tutorial how to create your own jquery content slider

to create an image slider everything works fine but i have to use Next and Previous in a separate div , how can i make it work?

here is code below

    <div class="nextprev">
       <div class="next">
          <a class="next" href="#">next</a>
       </div>

       <div class="nextborder">
       </div>

       <div class="prev">
          Prev
       </div>
    </div>


    <ul class="im"> 
       <li><img src="<?php echo $this->basePath().'/images/feat/shop/1/1_large.jpg';?>" /><a class="next1" href="#">next</a></li>
       <li><img src="<?php echo $this->basePath().'/images/feat/shop/2/2_large.jpg';?>" /><a class="next1" href="#">next</a><a class="previous" href="#">prev</a></li>
       <li><img src="<?php echo $this->basePath().'/images/feat/shop/3/3_large.jpg';?>" /><a class="next1" href="#">next</a><a class="previous" href="#">prev</a></li> 
       <li><img src="<?php echo $this->basePath().'/images/feat/shop/4/4_large.jpg';?>" /><a class="next1" href="#">next</a><a class="previous" href="#">prev</a></li> 
       <li><img src="<?php echo $this->basePath().'/images/feat/shop/5/5_large.jpg';?>" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li> 
    </ul>

I dont want to use next and previous button within <li></li> so i even tried calling $('.prev').click(function(){ }); but did not work ,, any idea to fix this?

Answer 1

I haven't tested it, but something like this should work pretty universal.

// HANDLE CLICK ON NEXT DIV
$(".next").click(function(){
    //SLIDE ONLY IF MARGIN-LEFT IS BIGGER THAN (ALL SLIDES - ONE SLIDE)*(-1)
    if($(".im").css("margin-left") > ($(".im").width()-$(".im").find("img").width())*(-1)){
        // SET MARGIN-LEFT TO MARGIN-LEFT - ONE SLIDE
        $(".im").animate({
            "margin-left": $(this).css("margin-left")-$(this).find("img").width();
        });
    }
});

// HANDLE CLICK ON PREV DIV
$(".prev").click(function(){
    //SLIDE ONLY IF MARGIN-LEFT SMALLER THAN 0
        if($(".im").css("margin-left") < 0){
        // SET MARGIN-LEFT TO MARGIN-LEFT + ONE SLIDE
        $(".im").animate({
            "margin-left": $(this).css("margin-left")+$(this).find("img").width();
        });
    }
});

Answer 2

Try something like this: http://jsfiddle.net/38pzs/

<div class="nextprev">
    <div class="next">next</div>
    <div class="prev">Prev</div>
</div>


<ul class="im"> 
   <li class="active"><img src="<?php echo $this->basePath().'/images/feat/shop/1/1_large.jpg';?>" /><a class="next1" href="#">next</a></li>
   <li><img src="<?php echo $this->basePath().'/images/feat/shop/2/2_large.jpg';?>" /><a class="next1" href="#">next</a><a class="previous" href="#">prev</a></li>
   <li><img src="<?php echo $this->basePath().'/images/feat/shop/3/3_large.jpg';?>" /><a class="next1" href="#">next</a><a class="previous" href="#">prev</a></li> 
   <li><img src="<?php echo $this->basePath().'/images/feat/shop/4/4_large.jpg';?>" /><a class="next1" href="#">next</a><a class="previous" href="#">prev</a></li> 
   <li><img src="<?php echo $this->basePath().'/images/feat/shop/5/5_large.jpg';?>" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li> 
</ul>

css:

.im li {
    display: none;
}
.im li.active {
    display: inherit;
}

html:

$(".prev").on('click', function() {
    $('li.active:not(:first-child)').removeClass('active').prev().addClass('active');
});

$(".next").on('click', function() {
    $('li.active:not(:last-child)').removeClass('active').next().addClass('active');
});