28

Some of us might not want to use ready plugins because of their high sizes and possibilty of creating conflicts with current javascript.

I was using light slider plugins before but when customer gives modular revise, it became really hard to manipulate. Then I aim to build mine for customising it easily. I believe sliders shouldn't be that complex to build from beginning.

What is a simple and clean way to build jQuery image slider?

Barlas Apaydin
  • 7,233
  • 11
  • 55
  • 86
  • 1
    If you didn't want a fading effect, I would have suggested the use of [Do It Yourself Slider](http://pioul.fr/jquery-diyslider/), a 1.14kb jQuery plugin that lets you do pretty much everything -- except fading, it's based on sliding. – aaaaaa Sep 26 '12 at 18:50

5 Answers5

63

Before inspecting examples, you should know two jQuery functions which i used most.

index() returns value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

eq() selects of an element based on its position (index value).

Basicly i take selected trigger element's index value and match this value on images with eq method.

- FadeIn / FadeOut effect.

- Sliding effect.

- alternate Mousewheel response.

​html sample:

<ul class="images">
   <li>
      <img src="images/1.jpg" alt="1" />
   </li>
   <li>
      <img src="images/2.jpg" alt="2" />
   </li>
   ...
</ul>

<ul class="triggers">
   <li>1</li>
   <li>2</li>
   ...
</ul>
<span class="control prev">Prev</span>
<span class="control next">Next</span>

OPACITY EFFECT: jsFiddle.

css trick: overlapping images with position:absolute

ul.images { position:relative; }
  ul.images li { position:absolute; }

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;

triggers.first().addClass('active');
images.hide().first().show();

function sliderResponse(target) {
    images.fadeOut(300).eq(target).fadeIn(300);
    triggers.removeClass('active').eq(target).addClass('active');
}

SLIDING EFFECT: jsFiddle.

css trick: with double wrapper and use child as mask

.mask { float:left; margin:40px; width:270px; height:266px; overflow:hidden;  }
    ul.images { position:relative; top:0px;left:0px; }
    /* this width must be total of the images, it comes from jquery */
        ul.images li { float:left; }

jQuery:

var target;
var triggers = $('ul.triggers li');
var images = $('ul.images li');
var lastElem = triggers.length-1;
var mask = $('.mask ul.images');
var imgWidth = images.width();

triggers.first().addClass('active');
mask.css('width', imgWidth*(lastElem+1) +'px');

function sliderResponse(target) {
    mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300);
    triggers.removeClass('active').eq(target).addClass('active');
}

Common jQuery response for both slider:

( triggers + next/prev click and timing )

triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}

var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}
Barlas Apaydin
  • 7,233
  • 11
  • 55
  • 86
  • +1 I was using png images so this was almost perfect. I don't know if my workaround is the most elegant solution but it worked. I just added a class to all the images except the first that gave them display: none to start off. Then on the first pass through I stripped the class. It works perfectly now for png. If anyone wants a sample I can fix up the jsfiddle but I think everyone will get the idea. – o_O Jan 11 '13 at 04:44
  • this is cool, how could i give it a scroll transition instead of fade? – surfbird0713 Jan 28 '13 at 18:58
  • @barlas, can you give me a hint on the slider? when i am on the first slide and click "prev" the slideshow shows a blank slide while highlighting the last thumbnail. how can i make it show the last image in the slide div instead of blank? – surfbird0713 Jan 28 '13 at 22:23
  • 1
    @barlas, I have an awesome slider that does everything I want it to thanks to you. Many thanks. – surfbird0713 Jan 30 '13 at 14:57
  • 1
    Great answer! I needed an even more basic version so I brought it back to the bare minimal code what I needed. Here is my edit: http://jsfiddle.net/mjaA3/722/ :-) – beeman Aug 05 '13 at 20:30
  • 3
    A very good answer here! I was also looking for this, because I am a newbie with jQuery, so I have to learn from others :-) – Victor Sep 27 '13 at 06:29
  • @BarlasApaydin. Great Answer. I have a slightly different situation. If I have 20 elements, is there any way we could restrict the initial list size to say 10 and then when I am on 10th element, click on next gets me 11th element. In your case it seems I need to show all 20 elements at once and then only the pagination works. Can you help me out on this? – ajm Oct 07 '13 at 04:44
  • You can do that by changing tager value on next and timing responses @anything here is a example: http://jsfiddle.net/mjaA3/984/ – Barlas Apaydin Oct 07 '13 at 07:51
  • @BarlasApaydin : Can you tell me how to make this slider as a fluid layout slider ? – RDX RaN Nov 19 '13 at 08:24
  • Nice snippet! But it seems a little bit glitchy when it comes to big images (1600x700) for example. Any clues? – Patrice Poliquin Aug 07 '14 at 18:32
  • You just need to adjust css mate, if you do it right you can build a responsive slider with this code also @PatricePoliquin – Barlas Apaydin Aug 07 '14 at 19:03
  • How can I stop the automatic slide? I would only like the triggers to make it slide. Thanks – DannyBoy Aug 27 '15 at 14:46
  • @DanielJoseph just use: resetTiming() function mate or if you want to remove it completly, use like this: http://jsfiddle.net/mjaA3/2622/ – Barlas Apaydin Aug 27 '15 at 14:48
  • How would you pause on hover and continue on hover out? – Si8 Jul 18 '16 at 19:43
18

Here is a simple and easy to understand code for Creating image slideshow using JavaScript without using Jquery.

<script language="JavaScript"> 
var i = 0; var path = new Array(); 

// LIST OF IMAGES 
path[0] = "image_1.gif"; 
path[1] = "image_2.gif"; 
path[2] = "image_3.gif"; 

function swapImage() { document.slide.src = path[i]; 
if(i < path.length - 1) i++; 
else i = 0; setTimeout("swapImage()",3000); 
} window.onload=swapImage;

</script> 

<img height="200" name="slide" src="image_1.gif" width="400" />
Brad Larson
  • 170,088
  • 45
  • 397
  • 571
shuseel
  • 597
  • 6
  • 10
2

I have recently created a solution with a gallery of images and a slider that apears when an image is clicked.

Take a look at the code here: GitHub Code

And a live example here: Code Example

var CreateGallery = function(parameters) {
 var self = this;
 this.galleryImages = [];
 this.galleryImagesSrcs = [];
 this.galleryImagesNum = 0;
 this.counter;
 this.galleryTitle = parameters.galleryTitle != undefined ? parameters.galleryTitle : 'Gallery image';
 this.maxMobileWidth = parameters.maxMobileWidth != undefined ? parameters.maxMobileWidth : 768;
 this.numMobileImg = parameters.numMobileImg != undefined ? parameters.numMobileImg : 2;
 this.maxTabletWidth = parameters.maxTabletWidth != undefined ? parameters.maxTabletWidth : 1024;
 this.numTabletImg = parameters.numTabletImg != undefined ? parameters.numTabletImg : 3;
 this.addModalGallery = function(gallerySelf = self){
  var $div = $(document.createElement('div')).attr({
   'id': 'modal-gallery'
  }).append($(document.createElement('div')).attr({
    'class': 'header'
   }).append($(document.createElement('button')).attr({
     'class': 'close-button',
     'type': 'button'
    }).html('&times;')
   ).append($(document.createElement('h2')).text(gallerySelf.galleryTitle))
  ).append($(document.createElement('div')).attr({
    'class': 'text-center'
   }).append($(document.createElement('img')).attr({
     'id': 'gallery-img'
    })
   ).append($(document.createElement('button')).attr({
     'class': 'prev-button',
     'type': 'button'
    }).html('&#9668;')
   ).append($(document.createElement('button')).attr({
     'class': 'next-button',
     'type': 'button'
    }).html('&#9658;')
   )
  );
  parameters.element.after($div);
 };
 $(document).on('click', 'button.prev-button', {self: self}, function() {
  var $currImg = self.counter >= 1 ? self.galleryImages[--self.counter] : self.galleryImages[self.counter];
  var $currHash = self.galleryImagesSrcs[self.counter];
  var $src = $currImg.src;
  window.location.hash = $currHash;
  $('img#gallery-img').attr('src', $src);
  $('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1));
 });
 $(document).on('click', 'button.next-button', {self: self}, function() {
  var $currImg = self.counter < (self.galleryImagesNum - 1) ? self.galleryImages[++self.counter] : self.galleryImages[self.counter];
  var $currHash = self.galleryImagesSrcs[self.counter];
  var $src = $currImg.src;
  window.location.hash = $currHash;
  $('img#gallery-img').attr('src', $src);
  $('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1));
 });
 $(document).on('click', 'div#modal-gallery button.close-button', function() {
  $('#modal-gallery').css('position', 'relative');
  $('#modal-gallery').hide();
  $('body').css('overflow', 'visible');
 });
 parameters.element.find('a').on('click', {self: self}, function(event) {
  event.preventDefault();
  $('#modal-gallery').css('position', 'fixed');
  $('#modal-gallery').show();
  $('body').css('overflow', 'hidden');
  var $currHash = this.hash.substr(1);
  self.counter = self.galleryImagesSrcs.indexOf($currHash); 
  var $src = $currHash;
  window.location.hash = $currHash;
  $('img#gallery-img').attr('src', $src);
  $('div#modal-gallery h2').text(self.galleryTitle + ' ' + (self.counter + 1));
 });
 this.sizeGallery = function(gallerySelf = self) {
  var $modalGallery = $(document).find("div#modal-gallery");
  if($modalGallery.length <= 0) {
   this.addModalGallery();
  }
  var $windowWidth = $(window).width();
  var $parentWidth = parameters.element.width();
  var $thumbnailHref = parameters.element.find('img:first').attr('src');
  if($windowWidth < gallerySelf.maxMobileWidth) {
   var percentMobile = Math.floor(100 / gallerySelf.numMobileImg); 
   var emMobile = 0;
   var pxMobile = 2;
//                        var emMobile = gallerySelf.numMobileImg * 0.4;
//                        var pxMobile = gallerySelf.numMobileImg * 2;
   parameters.element.find('img').css('width', 'calc('+percentMobile+'% - '+emMobile+'em - '+pxMobile+'px)');
  } else if($windowWidth < gallerySelf.maxTabletWidth) {
   var percentTablet = Math.floor(100 / gallerySelf.numTabletImg); 
   var emTablet = 0;
   var pxTablet = 2;
//                        var emTablet = gallerySelf.numMobileImg * 0.4;
//                        var pxTablet = gallerySelf.numMobileImg * 2;
   parameters.element.find('img').css('width', 'calc('+percentTablet+'% - '+emTablet+'em - '+pxTablet+'px)');
  } else {
   var $thumbImg = new Image();
   $thumbImg.src = $thumbnailHref;
   $thumbImg.onload = function() {
    var $thumbnailWidth = this.width;
    if($parentWidth > 0 && $thumbnailWidth > 0) {
     parameters.element.find('img').css('width', (Math.ceil($thumbnailWidth * 100 / $parentWidth))+'%');
    }
   };
  }
 };
 this.startGallery = function(gallerySelf = self) {
  parameters.element.find('a').each(function(index, el) {
   var $currHash = el.hash.substr(1);
   var $img = new Image();
   $img.src = $currHash;
   gallerySelf.galleryImages.push($img);
   gallerySelf.galleryImagesSrcs.push($currHash);
  });
  this.galleryImagesNum = this.galleryImages.length;
 };
 this.sizeGallery();
 this.startGallery();
};
var myGallery;
$(window).on('load', function() {
 myGallery = new CreateGallery({
  element: $('#div-gallery'),
  maxMobileWidth: 768,
  numMobileImg: 2,
  maxTabletWidth: 1024,
  numTabletImg: 3
 });
});
$(window).on('resize', function() {
 myGallery.sizeGallery();
});
#div-gallery {
 text-align: center;
}
#div-gallery img {
 margin-right: auto;
 margin-left: auto;
}
div#modal-gallery {
 top: 0;
 left: 0;
 width: 100%;
 max-width: none;
 height: 100vh;
 min-height: 100vh;
 margin-left: 0;
 border: 0;
 border-radius: 0;
 z-index: 1006;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 display: none;
 background-color: #fefefe;
 position: relative;
 margin-right: auto;
 overflow-y: auto;
 padding: 0;
}
div#modal-gallery div.header {
 position: relative; 
}
div#modal-gallery div.header h2 {
 margin-left: 1rem; 
}
div#modal-gallery div.header button.close-button {
 position: absolute;
 top: calc(50% - 1em);
 right: 1rem;
}
div#modal-gallery img {
 display: block;
 max-width: 98%;
 max-height: calc(100vh - 5em);
 margin-right: auto;
 margin-left: auto;
}
div#modal-gallery div.text-center {
 position: relative;
}
button.close-button {
 display: inline-block;
 padding: 6px 12px;
 margin-bottom: 0;
 font-size: 20px;
 font-weight: 400;
 line-height: 1.42857143;
 text-align: center;
 white-space: nowrap;
 vertical-align: middle;
 -ms-touch-action: manipulation;
 touch-action: manipulation;
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 background-image: none;
 border: 1px solid transparent;
 border-radius: 4px;
 color: #333;
 background-color: #fff;
 border-color: #ccc;
}
button.close-button:hover, button.close-button:focus {
 background-color: #ddd;
}
button.next-button:hover, button.prev-button:hover, button.next-button:focus, button.prev-button:focus {
 color: #fff;
 text-decoration: none;
 filter: alpha(opacity=90);
 outline: 0;
 opacity: .9;
}
button.next-button, button.prev-button {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 width: 15%;
 font-size: 20px;
 color: #fff;
 text-align: center;
 text-shadow: 0 1px 2px rgba(0,0,0,.6);
 background-color: rgba(0,0,0,0);
 filter: alpha(opacity=50);
 opacity: .5;
 border: none;
}
button.next-button {
 right: 0;
 left: auto;
 background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
 background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
 background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
 background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
 background-repeat: repeat-x;
}
button.prev-button {
 background-image: -webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
 background-image: -o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
 background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));
 background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
 background-repeat: repeat-x;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div-gallery">
 <a href="#http://placehold.it/1024x1024/ff0000/000000?text=Gallery+image+1"><img src="http://placehold.it/300x300/ff0000/000000?text=Gallery+image+1" alt=""></a>
 <a href="#http://placehold.it/1024x1024/ff4000/000000?text=Gallery+image+2"><img src="http://placehold.it/300x300/ff4000/000000?text=Gallery+image+2" alt=""></a>
 <a href="#http://placehold.it/1024x1024/ff8000/000000?text=Gallery+image+3"><img src="http://placehold.it/300x300/ff8000/000000?text=Gallery+image+3" alt=""></a>
 <a href="#http://placehold.it/1024x1024/ffbf00/000000?text=Gallery+image+4"><img src="http://placehold.it/300x300/ffbf00/000000?text=Gallery+image+4" alt=""></a>
 <a href="#http://placehold.it/1024x1024/ffff00/000000?text=Gallery+image+5"><img src="http://placehold.it/300x300/ffff00/000000?text=Gallery+image+5" alt=""></a>
 <a href="#http://placehold.it/1024x1024/bfff00/000000?text=Gallery+image+6"><img src="http://placehold.it/300x300/bfff00/000000?text=Gallery+image+6" alt=""></a>
 <a href="#http://placehold.it/1024x1024/80ff00/000000?text=Gallery+image+7"><img src="http://placehold.it/300x300/80ff00/000000?text=Gallery+image+7" alt=""></a>
 <a href="#http://placehold.it/1024x1024/40ff00/000000?text=Gallery+image+8"><img src="http://placehold.it/300x300/40ff00/000000?text=Gallery+image+8" alt=""></a>
 <a href="#http://placehold.it/1024x1024/00ff00/000000?text=Gallery+image+9"><img src="http://placehold.it/300x300/00ff00/000000?text=Gallery+image+9" alt=""></a>
 <a href="#http://placehold.it/1024x1024/00ff40/000000?text=Gallery+image+10"><img src="http://placehold.it/300x300/00ff40/000000?text=Gallery+image+10" alt=""></a>
 <a href="#http://placehold.it/1024x1024/00ff80/000000?text=Gallery+image+11"><img src="http://placehold.it/300x300/00ff80/000000?text=Gallery+image+11" alt=""></a>
 <a href="#http://placehold.it/1024x1024/00ffbf/000000?text=Gallery+image+12"><img src="http://placehold.it/300x300/00ffbf/000000?text=Gallery+image+12" alt=""></a>
 <a href="#http://placehold.it/1024x1024/00ffff/000000?text=Gallery+image+13"><img src="http://placehold.it/300x300/00ffff/000000?text=Gallery+image+13" alt=""></a>
 <a href="#http://placehold.it/1024x1024/00bfff/000000?text=Gallery+image+14"><img src="http://placehold.it/300x300/00bfff/000000?text=Gallery+image+14" alt=""></a>
 <a href="#http://placehold.it/1024x1024/0080ff/000000?text=Gallery+image+15"><img src="http://placehold.it/300x300/0080ff/000000?text=Gallery+image+15" alt=""></a>
 <a href="#http://placehold.it/1024x1024/0040ff/000000?text=Gallery+image+16"><img src="http://placehold.it/300x300/0040ff/000000?text=Gallery+image+16" alt=""></a>
</div>
quAnton
  • 776
  • 6
  • 10
2

Checkout this whole bunch of code to build simple jquery image slider. Copy and save this file to local machine and test it. You can modify it according to your requirement.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
  var current_img = 1;
  var i;

  $(document).ready(function(){
    var imgs = $("#image").find("img");

    function show_img(){
      for (i = 1; i < imgs.length+1; i++) {
        if(i == current_img){
          $(imgs[i-1]).show();
        }else{
          $(imgs[i-1]).hide()
        }
      }
    }

    $("#prev").click(function(){
      if(current_img == 1){
        current_img = imgs.length;
      }else{
        current_img = current_img - 1
      }
      show_img();
    });

    $("#next").click(function(){
      if(current_img == imgs.length){
        current_img = 1;
      }else{
        current_img = current_img + 1
      }
      show_img();
    });

  });

</script>
</head>
<body>

<div style="margin-top: 100px;"></div>
<div class="container">
  <div class="col-sm-3">
    <button type="button" id="prev" class="btn">Previous</button>
  </div>

  <div class="col-sm-6">
    <div id="image">
      <img src="https://www.w3schools.com/html/pulpitrock.jpg" alt="image1">
      <img src="https://www.w3schools.com/cSS/img_forest.jpg" alt="image2" hidden="true" style="max-width: 500px;">
      <img src="https://www.w3schools.com/html/img_chania.jpg" alt="image3" hidden="true">
    </div>
  </div>

  <div class="col-sm-3">
    <button type="button" id="next" class="btn">Next</button>
  </div>
</div>

</body>
</html>
V K Singh
  • 1,134
  • 9
  • 14
1

I have written a tutorial on creating a slideshow, The tutorial page In case the link becomes invalid I have included the code in my answer below.

the html:

<div id="slideShow">
 <div id="slideShowWindow">
 <div class="slide">
 <img src="”img1.png”/">
 <div class="slideText">
 <h2>The Slide Title</h2> 
 <p>This is the slide text</p>
 </div> <!-- </slideText> -->
 </div> <!-- </slide> repeat as many times as needed --> 
 </div> <!-- </slideShowWindow> -->
 </div> <!-- </slideshow> -->

css:

img {
 display: block;
 width: 100%;
 height: auto;
}
p{
 background:none;
 color:#ffffff;
}
#slideShow #slideShowWindow {
 width: 650px;
 height: 450px;
 margin: 0;
 padding: 0;
 position: relative;
 overflow:hidden;
 margin-left: auto;
 margin-right:auto;
}

#slideShow #slideShowWindow .slide {
 margin: 0;
 padding: 0;
 width: 650px;
 height: 450px;
 float: left;
 position: relative;
 margin-left:auto;
 margin-right: auto;
 }

#slideshow #slideshowWindow .slide, .slideText {
    position:absolute;
    bottom:18px;
    left:0;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    color:#ffffff;
    font-family:Myriad Pro, Arial, Helvetica, sans-serif;
} 
.slideText {
 background: rgba(128, 128, 128, 0.49);
}

#slideshow #slideshowWindow .slide .slideText h2, 
#slideshow #slideshowWindow .slide .slideText p {
    margin:10px;
    padding:15px;
}

.slideNav {
 display: block;
 text-indent: -10000px;
 position: absolute;
 cursor: pointer;
}
#leftNav {
 left: 0;
 bottom: 0;
 width: 48px;
 height: 48px;
 background-image: url("../Images/plus_add_minus.png");
 background-repeat: no-repeat;
 z-index: 10;
}
#rightNav {
 right: 0;
 bottom: 0;
 width: 48px;
 height: 48px;
 background-image: url("../Images/plus_add_green.png");
 background-repeat: no-repeat;
 z-index: 10; }

jQuery:

$(document).ready(function () {

 var currentPosition = 0;
 var slideWidth = 650;
 var slides = $('.slide');
 var numberOfSlides = slides.length;
 var slideShowInterval;
 var speed = 3000;

 //Assign a timer, so it will run periodically
 slideShowInterval = setInterval(changePosition, speed);

 slides.wrapAll('<div id="slidesHolder"></div>');

 slides.css({ 'float': 'left' });

 //set #slidesHolder width equal to the total width of all the slides
 $('#slidesHolder').css('width', slideWidth * numberOfSlides);

 $('#slideShowWindow')
 .prepend('<span class="slideNav" id="leftNav">Move Left</span>')
 .append('<span class="slideNav" id="rightNav">Move Right</span>');

 manageNav(currentPosition);

 //tell the buttons what to do when clicked
 $('.slideNav').bind('click', function () {

 //determine new position
 currentPosition = ($(this).attr('id') === 'rightNav')
 ? currentPosition + 1 : currentPosition - 1;

 //hide/show controls
 manageNav(currentPosition);
 clearInterval(slideShowInterval);
 slideShowInterval = setInterval(changePosition, speed);
 moveSlide();
 });

 function manageNav(position) {
 //hide left arrow if position is first slide
 if (position === 0) {
 $('#leftNav').hide();
 }
 else {
 $('#leftNav').show();
 }
 //hide right arrow is slide position is last slide
 if (position === numberOfSlides - 1) {
 $('#rightNav').hide();
 }
 else {
 $('#rightNav').show();
 }
 }


 //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
 function changePosition() {
 if (currentPosition === numberOfSlides - 1) {
 currentPosition = 0;
 manageNav(currentPosition);
 } else {
 currentPosition++;
 manageNav(currentPosition);
 }
 moveSlide();
 }


 //moveSlide: this function moves the slide 
 function moveSlide() {
 $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
 }

});
M_Griffiths
  • 547
  • 1
  • 7
  • 26