11600

Jquery Slider Timer

Question:

I need to create a custom slider for a website using jquery. So far, I've managed to make it behave the way I want it if I click a button, but I would like to implement an automatic timer, so that the slides will switch after 5 seconds.

Here is my JS code:

function MasterSlider() { //store the current button ID var current_button = $(this).attr('id'); //reset all the items $('#slider ul a').removeClass('slider-button-active'); //set current item as active $(this).addClass('slider-button-active'); //scroll it to the right position $('.mask').scrollTo($(this).attr('rel'), 850); //Check which button is pressed and fade the text accordingly if(current_button == "slider_item1") { $('#slider h3').fadeOut().removeClass('caption_active'); $('#slider_caption1').fadeIn().addClass('caption_active'); } else if(current_button == "slider_item2") { $('#slider h3').fadeOut().removeClass('caption_active'); $('#slider_caption2').fadeIn().addClass('caption_active'); } else if(current_button == "slider_item3") { $('#slider h3').fadeOut().removeClass('caption_active'); $('#slider_caption3').fadeIn().addClass('caption_active'); } //disable click event return false; } //append click event to the UL list anchor tag $('#slider ul a').click(MasterSlider);

Thanks in advance!

Answer1:

You can dynamically trigger click() on your a elements in a setInterval !

var intv; var current = 0; // STARTING SLIDE(<li>element button) INDEX var slN = $('#slider li').length; // get number of slides(buttons.. all the same) // your function here with // clearInterval(intv); // in the second line. // In third line put: // current = $(this).closest('li').index(); // AUTO SLIDE function auto(){ intv = setInterval(function() { $('#slider ul li').eq( current++%slN ).find('a').click(); }, 5000 ); } auto(); // to start immediately auto-slide // PAUSE ON MOUSEOVER $('#slider').on('mouseenter mouseleave', function( e ){ var onMouEnt = e.type=='mouseenter' ? clearInterval(intv) : auto() ; }); <ul><li>Thanks to current++%slN the auto function will loop once the last button is triggered</li> <li>The PAUSE thing detects events mouseenter and mouseleave over your gallery and uses a ternary operator to do:</li> </ul>

$('#slider').on('mouseenter mouseleave', function( e ){ // catch eVENT var onMouEnt = e.type=='mouseenter' ? // if e IS mouseenter clearInterval(intv) : // clear autoslide interval auto() ; // else (is mouseleave) run 'auto' fn });

Answer2:

There is is a function setInterval

function hi(){ //Your code here } //set an interval setInterval(hi, 30000);

Recommend

  • Infinite Scroll Effect with javascript
  • Scroll Down [GeckoFx + Javascript]
  • Selenium python unable to scroll down
  • jQueryUI sortable and draggable target won't scroll horizontally for drop but will for sort
  • C++ password masking
  • Limit the number of visible pages in pagination
  • Fading between images
  • jQuery panel slider opens with button click but won't close
  • How do I detect which submit button was pressed on a Zend Framework form?
  • Replace any string in columns with 1
  • Difficulties implementing the Hysteresis step of Canny Algorithm in Halide without define_extern fun
  • I have a modal that opens a second modal and cannot close the first modal if open then close the sec
  • Capturing HTML Text Input Key press after key has been applied?
  • jQueryUI dialog replacement for confirm?
  • Jquery Show & ScrollTop (or ScrollTo)
  • Why do GeoJSON features appear like a negative photo of the features themselves?
  • How to add regEx in angular filter
  • div fade-in when window is scrolled a certain distance from the top
  • Thread synchronization with syncwarp
  • Possible to get mouse events fired when cursor is outside page?
  • Ajax Upload File: $_FILES is empty but files exists in request header
  • Adjust width of select element according to selected option's width
  • Visual Studio 2010 debugger build correctly - compiler pdb and linker pdb not in synch?
  • Blackberry - Custom EditField Cursor
  • Custom Tabgroup Appcelerator
  • Jquery UI tool tip close icon
  • How to avoid particles glitching together in an elastic particle collision simulator?
  • Body moving without any force applied? (Box2d)
  • Recording logins for password protected directories
  • Using jQuery closest() method with class selector
  • Splitting given String into two variables - php
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Menu Color Fade on Hover with Jquery
  • Check if a string to interpolate provides expected placeholders
  • Where to put my custom functions in Wordpress?
  • Jquery - Jquery Wysiwyg return html as a string
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Android Google Maps API OnLocationChanged only called once
  • Observable and ngFor in Angular 2