CODEWITHSUNDEEP
jqueryslideshow
mahmoud nezar sarhan
mahmoud nezar sarhan

Reputation: 756

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 "previous" the image disappears! Can anyone help me?

Here is the fiddle.

Upvotes: 5

Views: 3000

Answers (4)

Anonymous125217
Anonymous125217

Reputation: 11

<!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>

Upvotes: 0

sushil
sushil

Reputation: 2671

The problem with your code was that prev() of first isn't last. So, it would work when you look for next() element of the first, but won'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');
     });
 });

Upvotes: 1

mikhail
mikhail

Reputation: 5189

Fiddle: http://jsfiddle.net/tAaCN/4/

Since your selector is using img:first, you cannot use .prev() to access the previous element since you are already at the first child.

You can instead select the last element and "prepend" it as a first child of the slideshow.

$(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');
    });
});

Upvotes: 3

Roko C. Buljan
Roko C. Buljan

Reputation: 206593

I don't see the need for appending and prepending elements back and forth. You can just fade the needed index one

DEMO

$(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's 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 is used as a counter to keep track of the index of current image that can be than accessed using the .eq(index) selector, and all the siblings, well, using the .siblings() selector.

Upvotes: 1

Related Questions