Hi all
Demo here - http://www.ttmt.org.uk/slideshow/index-2.html
jsfiddle here - http://jsfiddle.net/VNHWz/
I know there are lots of carousel plugins but none of them do what I want.
I want a responsive image carousel that is the full width of the window.
At the moment I’m having problems getting the images to loop.
I thouhgt I might be able to do it checking the position of the first image and then moving it behind the last image when it’s off the screen
The carousel has 4 images and it looks like it might work when the first image is placed behind the last image but then it just stops.
Is this the best way to do this? Can anyone see where I’m going wrong?
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--css-->
<style type="text/css">
*{
margin:0;
padding:0;
}
.carousel{
overflow:hidden;
white-space:nowrap;
}
.img{
display:inline;
position:relative;
max-width:900px;
height:auto;
}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Title of the document</title>
</head>
<body>
<section >
<div class="carousel">
<div class="img"><img src="images/slide-show-1.jpg" /></div>
<div class="img"><img src="images/slide-show-2.jpg" /></div>
<div class="img"><img src="images/slide-show-3.jpg" /></div>
<div class="img"><img src="images/slide-show-4.jpg" /></div>
</div>
</section>
<script>
function slide(){
var img = $('.img');
var firstImg = img.first();
var lastImg = img.last()
var firstImagePos = firstImg.position().left;
img.animate({left:firstImagePos-900});
//alert('First image is '+$('.img img').first().attr('src') + '\
' + 'And First Image Pos is '+firstImagePos);
if(firstImagePos < -900){
firstImg.insertAfter(lastImg);
}
}
setInterval(function() {
//slide();
}, 2000);
</script>
</body>
</html>
