previous button is not working in jquery

Question

0.00/5 (No votes)

See more:

Hi i am using this code for jquery slider

jquery

JavaScript

<script type="text/javascript">
$(document).ready(function(){


$("#navleft").click(function() {
 $("#slideshow > div:gt(0)").hide();
  $('#slideshow > div:first').fadeOut(3000).prev().fadeIn(3000).end().appendTo('#slideshow');
});

$("#navright").click(function() {
  $("#slideshow > div:gt(0)").hide();
  $('#slideshow > div:first').fadeOut(3000).next().fadeIn(3000).end().appendTo('#slideshow');
});

});
</script>

HTML code

HTML

<input id="navleft" type="button" value="<<"/>
<div id="slideshow">
   <div>
    <img src="image1">
   </div>
   <div>
     <img src="image2">
   </div>  
   <div>
    <img src="image3">
   </div>
   <div>
    <img src="image4">
   </div>
   <div>
     <img src="image5">
   </div>  
</div>
<input id="navright" type="button" value=">>"/>

If i click the next button its works fine but previous button is not working...

plz help me...

Posted 21-Nov-12 22:30pm

saravana__

Add a Solution

4 solutions

Solution 1

I tested you code here :

http://jsfiddle.net/aF2jU/3/

and it seems like it is working but have some issues.. Please let us know what is your objective?

Thanks,
Jyotish

Posted 21-Nov-12 22:50pm

Jyotish Pillai

v2

Comments

saravana__ 22-Nov-12 4:54am

If i click the navleft button image is not displayed..

Solution 2

I guess it is because of div:gt(0) as it has to be div:gt(5)

$("#navleft").click(function() {
$("#slideshow > div:gt(5)").hide();
$('#slideshow > div:first').fadeOut(3000).prev().fadeIn(3000).end().appendTo('#slideshow');
});

So you tried with

div:gt(5)

. Earlier by mistake I pasted your code again with 0 and not 5.

Posted 21-Nov-12 23:11pm

Jyotish Pillai

Updated 21-Nov-12 23:17pm

v3

Comments

saravana__ 22-Nov-12 5:14am

sorry i have already try this code it not works..
if click the previous button nothing to display..

saravana__ 22-Nov-12 5:16am

Now i change that jquery..

$("#navleft").click(function() {
$("#slideshow > div:gt(0)").hide();
$('#slideshow > div:first').fadeOut(3000);
$('#slideshow > div:last').fadeIn(3000).end().appendTo('#slideshow');
});

But this also not works fine..

saravana__ 22-Nov-12 6:16am

I have changed div:gt(5) but its not work..

Solution 3

Using simple jquery and css property you can do it like this.

check this out.
http://jsfiddle.net/aF2jU/5/
bingo!! :-)

HTML

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#slideshow div
{
    position:absolute;
    margin:10px 0 0 10px;
    width:150px;
    height:150px;
}
.myImage
{
    width:150px;
    height:150px;
}

</style>
<script type="text/javascript">
var cnt = $('#slideshow img').length;
      $(document).ready(function(){
$("#navleft").click(function() {
  var liLast = $('img:last').hide().remove().prependTo($('#slideshow'));
					updateZindex();
					liLast.fadeIn('slow');
});
 
$("#navright").click(function() {
$('img:first').fadeOut('slow',function(){
						$(this).remove().appendTo($('#slideshow')).show();
						updateZindex();
					});
});
          });
		  
		  function updateZindex(){		
		$('#slideshow img').css('z-index',function(i){
			return cnt-i;
		});
	}
    </script>
</head>
<body>
	 <input id="navleft" type="button" value="<<"/>
<div id="slideshow">
     <div><img src="Leaf.jpg" alt="header1 hyperlink" class="myImage"></div>
     <div><img src="Water.jpg" alt="header2 hyperlink" class="myImage"></div>
     <div><img src="Grass.jpg" alt="header3 hyperlink" class="myImage"></div>
</div>
<input id="navright" type="button" value=">>"/>
</body>
</html>

Posted 22-Nov-12 0:26am

deepak.m.shrma

Updated 22-Nov-12 22:05pm

v2

Comments

saravana__ 22-Nov-12 6:39am

Your codes is works fine but my needs is totally difference..

deepak.m.shrma 22-Nov-12 22:38pm

Hmm. will you share what you xactly want to do.

saravana__ 22-Nov-12 23:38pm

***************HTML CODE************
<input id="navleft" type="button" value="<<"/>
<div id="slideshow">
<div>
header1
hyperlink
<img src="image1">
</div>
<div>
header2
hyperlink
<img src="image2">
</div>
<div>
header3
hyperlink
<img src="image3">
</div>
<div>
header4
hyperlink
<img src="image4">
</div>
<div>
header5
hyperlink
<img src="image5">
</div>
</div>
<input id="navright" type="button" value=">>"/>

******************End***********************
Now i want to move the divs one by one in both left and right side

deepak.m.shrma 23-Nov-12 4:06am

i updated the code please check it now. its working well i think.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

saravana__ · Accepted Answer · 2012-11-22T21:19:00

The below code is works fine
*********************** jquery ***************

JavaScript

<script type="text/javascript">
$(document).ready(function(){

$("#navleft").click(function() {

 $("#slideshow").children(":last").fadeOut(function(){
 
        var p = $(this).parent();
        $(this).remove().prependTo(p).fadeIn();		
		$(p).children(":first").removeClass('visblefalse').addClass('visbletrue');
		$(p).children(":first").next().removeClass('visbletrue').addClass('visblefalse');	
		
    });
	
});

$("#navright").click(function() {

    $("#slideshow").children(":first").fadeOut(function(){
	
        var p = $(this).parent();
        $(this).remove().appendTo(p).fadeIn()
		$(p).children(":first").removeClass('visblefalse').addClass('visbletrue');
		$(p).children(":last").removeClass('visbletrue').addClass('visblefalse');	
		
    });
	
});


});
</script>

**************************** CSS ***************************

HTML

<style type="text/css">
#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 	

}
.visblefalse
{
visibility:hidden;
}
.visbletrue
{
visibility:visible;
}
</style>