jquery slider auto start function

Question

Hi Friends I have a image slider on my site

slides images by click on preview and next button.

My question is: is it possible to add auto start instead of onclik ?

Here is my codes:

$(document).ready(function(){ var currentPosition = 0; var slideWidth = 560; var slides = $('.slide'); var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
  .css({
      'float' : 'left',
      'width' : slideWidth
    });

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

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
  currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

  // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
  if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
  // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }   
});
</script>

a quick solution could be to trigger a click event on fixed intervals using setInterval or setTimeout e.g. append at the end of your code something like setInterval(function(){$('.control').trigger('click');},2000); this will auto slide every 2secs — melc
thanks for the answer when I do that under the codes it starts automoticly but shows only 1 image goes to left and back to right. here is the function $('.control') .bind('click', function(){ // Determine new position currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; // Hide / show controls manageControls(currentPosition); — Serap Uygur
that would be because your currentPosition assignment depends on the calling element, and so breaks when being called from the timing event, it will always equate to currentPosition-1 — lukeocom

acarlon acarlon · Accepted Answer · 2014-03-11T08:33:04

You could separate out the functionality in the click to a different function, then call it at an interval. This jsfiddle shows a simple example.

var rotation = 90;
function doAnim()
{
    var rotationString = 'rotateY(' + rotation + 'deg)'
    $('#slideOne').css('webkit-transform',rotationString);
    $('#slideTwo').css('webkit-transform',rotationString);
    $('#slideOne').css('transform',rotationString);
    $('#slideTwo').css('transform',rotationString);    
    rotation += 90;
}

$(function(){    
    setInterval(doAnim,1000);
});

If you are using jquery 1.7+, then you might want to consider changing the bind event to on. See on documentation here.

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

jquery slider auto start function

2 Answers