CODEWITHSUNDEEP
javascriptjqueryhtmlcssslideshow
Alireza
Alireza

Reputation: 1

after last image slideshow doesnt work

My slideshow works fine in the first time and show three images correctly but it doesn't show image2 again.I think there is a problem in my jquery code but I can't find it.If there is an easier way to create a slideshow like this please tell me.

slideswitch();
var i=2;
function slideswitch()
{
	"use strict";
	i++;
	if(i===4){i=1;}
	if(i===1)
	{
	$('#img1').animate({right:'0'});
	$('#img3').animate({left:'-100%'});	
	document.getElementById('img2').style.right='-100%';
	}
	else if(i===2)
	{
	$('#img2').animate({right:'0'});
	$('#img1').animate({left:'-100%'});
	document.getElementById('img3').style.right='-100%';	
	}
	else if(i===3)
	{
	$('#img3').animate({right:'0'});
	$('#img2').animate({left:'-100%'});
	document.getElementById('img1').style.right='-100%';	
	}
	setTimeout(slideswitch,3000);
}
#img3
{
	position:absolute;
	right:-100%;
	width:100%;
	height:100%;
}
#img2
{
	position:absolute;
	right:0;
	width:100%;
	height:100%;
}
#img1
{
	position:absolute;
	right:-100%;
	width:100%;
	height:100%;
}
.show
{
	width:100%;
	height:500px;
	position:relative;
	overflow:hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SlideShow</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="show" class="show">
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" id="img1"/>
<img src="http://wpguru.co.uk/wp-content/uploads/2013/09/CSS-Logo-214x300.png" id="img2" />
<img src="http://ric.mclaughlin.today/assets/themes/ricify/images/javascript.png" id="img3"/>
</div>
</body>
</html>

Upvotes: 0

Views: 48

Answers (1)

Ahmed Salama
Ahmed Salama

Reputation: 2825

When you assign a value to left or right for any element you must make the other is auto :

I made some edits to your script you can see it here: https://jsfiddle.net/n6c7mstn/

slideswitch();
var i=2;
function slideswitch()
{
  "use strict";
  i++;
  if(i===4){i=1;}
  if(i===1)
  {
    $('#img1').animate({right:'0'});
    $('#img3').animate({left:'-100%'}); 
    document.getElementById('img2').style.right='-100%';
  }
  else if(i===2)
  {
    $('#img2').animate({right:'0'}).css('left','auto');
    $('#img1').animate({left:'-100%'}).css('right','auto');
    document.getElementById('img3').style.right='-100%';    
    document.getElementById('img3').style.left='auto';  
  }
  else if(i===3)
  {
    $('#img3').animate({right:'0'}).css('left','auto');
    $('#img2').animate({left:'-100%'}).css('right','auto');
    document.getElementById('img1').style.right='-100%';    
    document.getElementById('img1').style.left='auto';  
  }
  setTimeout(slideswitch,3000);
}

Upvotes: 1

Related Questions