Jquery slideshow
I made a jquery slideshow and here is the code:
HTML
<div id="slideshow">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div id="previous">previous</div>
<div id="next">Next</div>
CSS
#slideshow {
width: 700px;
height: 400px;
position: relative;
overflow: hidden;
}
#slideshow img {
position: absolute;
}
JQuery
$(document).ready(function() {
$('#slideshow img:gt(0)').hide();
$('#previous').click(function() {
$('#slideshow img:first').fadeOut(1000).prev().fadeIn(1000).end().appendTo('#slideshow');
});
$('#next').click(function() {
$('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
});
});
The "next" button works, but when I click the "previous", the image disappears! Can anybody help me?
Here is the fiddle .
+4
4 answers
Fiddle : http://jsfiddle.net/tAaCN/4/
Since your selector uses img:first, you cannot use .prev()to access the previous item, since you already have the first child.
Instead, you can select the last item and βadd itβ as the first child of the slide show.
$(function() {
$('#slideshow img:gt(0)').hide();
$('#previous').click(function() {
$('#slideshow img:first').fadeOut(1000);
$('#slideshow img:last').fadeIn(1000).prependTo('#slideshow');
});
$('#next').click(function() {
$('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
});
});
+2
. index
$(function() {
var $img = $('#slideshow img'); // Cache your elements selector
var c = 0; // counter // Represents the first image index to show
var n = $img.length; // number of images
$img.eq(c).siblings().hide(); // Target the 'c' one and hide it siblings
$('#previous, #next').click(function(){
c = this.id=='next'? ++c : --c ; // increase - decrease counter
$img.fadeTo(1000,0).eq( c%n ).stop(1).fadeTo(1000,1); // Loop using reminder
});
});
c index , .eq(index), , , .siblings().
+1
The problem with your code was that prev () is not the first. That way, this will work when you look for the next () element of the first, but you don't work for the prev () element of the first.
Demo: http://jsfiddle.net/tAaCN/3/
$(document).ready(function() {
$('#slideshow img:gt(0)').hide();
$('#previous').click(function() {
$('#slideshow img').first().fadeOut(1000).end().last().fadeIn(1000).prependTo('#slideshow');
});
$('#next').click(function() {
$('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
});
});
+1
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
.slider{
width: 400px;
height: 400px;
overflow:hidden;
margin:auto;
padding-top:50px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$(window).load(function(){
$('.slider #img1').show("fade",500);
$('.slider #img1').delay(4500).hide("slide",{direction:'left'},500);
var sc=$('.slider img').size();
var count=2;
setInterval(function(){
$('.slider #img'+count).show("fade",500);
$('.slider #img'+count).delay(4500).hide("slide",{direction:'left'},500);
if (count==sc) {
count=1;
}else{
count=count+1;
}
},11000);
});
});
</script>
<body>
<div class="slider">
<img id="img1" src="4.jpg" style="width: 400px;height: 400px;"/>
<img id ="img2" src="5.jpg" style="width: 400px;height: 400px;"/>
<img id="img3" src="6.png" style="width: 400px;height: 400px;"/>
</div>
</body>
</html>
0