CODEWITHSUNDEEP
javascriptjquerycsssliderslideshow
Rucc
Rucc

Reputation: 73

How can I add navigation arrows on the "Simplest jQuery Slideshow"?

I am using the "Simplest jQuery Slideshow" from snook.ca (http://snook.ca/archives/javascript/simplest-jquery-slideshow) and I love it. I quote the code here:

JavaScript

$(function(){
  $('.fadein img:gt(0)').hide();
  setInterval(function(){
  $('.fadein :first-child').fadeOut()
    .next('img').fadeIn()
    .end().appendTo('.fadein');}, 
  3000);
});

CSS

.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }

HTML

<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>

I would like to add to arrows to go to the next and the last images manually on click. Since I haven't found a solution yet anywhere, and I have no idea on Jquery I am asking this question here...

Realy thanks to you all!

Upvotes: 2

Views: 5130

Answers (1)

ShadowCat7
ShadowCat7

Reputation: 824

$(function(){
    $('.fadein img:gt(0)').hide();
    $('.nextButton').on('click', function(){
        $('.fadein :first-child').fadeOut()
           .next('img').fadeIn()
           .end().appendTo('.fadein');
    });
    $('.previousButton').on('click', function () {
        $('.fadein :last-child').fadeIn()
            .insertBefore($('.fadein :first-child').fadeOut());
    });
});

It's different going backwards, because the other script is taking advantage of appendTo and the current img being at index 0. You'll have to provide the buttons, but it's pretty simple. You can try it out on this jsFiddle.

Upvotes: 1

Related Questions