Can someone provide details on how to reset the auto-scroll timer on my content slideshow after each click?

I'm currently building a content slideshow and you can find it at

Below is the javascript code:

jQuery(document).ready(function($) {
  setInterval(function() {
    moveRight();
  }, 8000);
  var slideCount = $('#slider-isp ul li').length;
  var slideWidth = $('#slider-isp ul li').width();
  var slideHeight = $('#slider-isp ul li').height();
  var sliderUlWidth = slideCount * slideWidth;
  $('#slider-isp').css({
    width: slideWidth,
    height: slideHeight
  });

  $('#slider-isp ul').css({
    width: sliderUlWidth,
    marginLeft: -slideWidth
  });
  $('#slider-isp ul li:last-child').prependTo('#slider-isp ul');
  function moveLeft() {
    $('#slider-isp ul').animate({
      left: +slideWidth
    }, 1000, function() {
      $('#slider-isp ul li:last-child').prependTo('#slider-isp ul');
      $('#slider-isp ul').css('left', '');
    });
  };

  function moveRight() {
    $('#slider-isp ul').animate({
      left: -slideWidth
    }, 1000, function() {
      $('#slider-isp ul li:first-child').appendTo('#slider-isp ul');
      $('#slider-isp ul').css('left', '');
    });
  };

  $('a.control_prev').click(function() {
    moveLeft();
  });

  $('a.control_next').click(function() {
    moveRight();
  });
});

I've been researching how to reset the auto-scroll timer after a click on an image slider, similar to what's discussed in this post:
How do I get my image slider to reset its auto-scroll timer after a click?

I'd like to implement something similar without disrupting the existing code. Any help would be appreciated.

Please assist.

javascriptjqueryhtmlcss

Answer №1

Given the absence of a verifiable example, the following steps can be suggested:

  • Store your setInterval function in a variable.
  • When a click event occurs, clear that interval to prevent further execution.
  • Re-establish the interval using the same variable after the click.

By doing this, the same time interval will elapse after each click action.

It should be noted that some adjustments are needed in the code (not tested due to lack of HTML information):

jQuery(document).ready(function ($) {
    
    // Save the timer
    var tick = setInterval(function () {
        moveRight();
        }, 8000);

        var slideCount = $('#slider-isp ul li').length;
        var slideWidth = $('#slider-isp ul li').width();
        var slideHeight = $('#slider-isp ul li').height();
        var sliderUlWidth = slideCount * slideWidth;

        $('#slider-isp').css({ width: slideWidth, height: slideHeight });

        $('#slider-isp ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

        $('#slider-isp ul li:last-child').prependTo('#slider-isp ul');

        function moveLeft() {
            $('#slider-isp ul').animate({
                left: + slideWidth
            }, 1000, function () {
                $('#slider-isp ul li:last-child').prependTo('#slider-isp ul');
                $('#slider-isp ul').css('left', '');
            });
        };

        function moveRight() {
            $('#slider-isp ul').animate({
                left: - slideWidth
            }, 1000, function () {
                $('#slider-isp ul li:first-child').appendTo('#slider-isp ul');
                $('#slider-isp ul').css('left', '');
            });
        };

        $('a.control_prev').click(function () {
            clearInterval(tick); // Stop the timer
            moveLeft(); // Perform desired action for click
            
            // Restart the timer
            tick = setInterval(function () {
              moveRight();
              }, 8000);
        });

        $('a.control_next').click(function () {
            clearInterval(tick); // Stop the timer
            moveRight(); // Perform desired action for click
            
            // Restart the timer
            tick = setInterval(function () {
              moveRight();
              }, 8000);
        });

    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show active Main Menu and sub Menu through the use of CSS and javascript

I currently have left side menus. <div class="panel"> <div class="panel-heading panel-red" role="tab" id="headingDash" style=""> <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseDash" aria-expa ...

javascriptjqueryhtmlcss

Beginner Polymer Kit including Node, Express, and Puppeteer for a seamless development experience

Hey there, I'm completely new to this so any guidance would be greatly appreciated. I've recently figured out how to use Node and Express to serve a Polymer Starter Kit (PSK) website from the Polymer build directory by creating a server.js file ...

javascriptnode.jsexpresspolymerpuppeteer

Struggling to make jeditbale ajax call function properly

Currently, I am attempting to modify text directly on the webpage using the jeditable plugin. Unfortunately, I have encountered a challenge when it comes to saving the updated data properly through an ajax call. Although I can successfully edit the text, i ...

jqueryajaxjeditable

Discovering the best way to organize and sort information retrieved from the backend within an Angular

How can I restrict a user to only search for data that has been provided from the backend and prevent them from creating new data? In my backend, there are two words: "Chart" and "Map". I am looking for a way to limit the user's search to only these ...

htmlangulartypescriptfilterangular-material

JavaScript transforming an array into a counter

I am seeking a way to transform a one-dimensional array into a frequency dictionary in JavaScript. The array elements should serve as keys, while their frequencies act as values. Take, for example, the Python script below, which generate a list of 1024 ra ...

javascriptarrays

The Radio button and Checkbox values are causing an issue where the Radio button is continuously summing upon clicking without a limit. Why is this happening? Check out

I'm currently stuck in a function and believe it would be helpful for you to guide me along the correct path. My goal is to sum the values of checked boxes with the values of checked radio buttons. However, the radio values are continuously accumulat ...

javascripthtmlcsscheckboxradio-button

Creating a three-column layout with position fixed in the center

I'm struggling with achieving a maximum width of 400px for the entire set of three columns and centering them. ---------------------------------------------------- | | | |----------------------------- ...

htmlcss

Strategies for managing a high volume of ajax requests

I have a large number of GUIDs, possibly over 400, that I need to use to query a database and retrieve their status. The challenge is that the status may not be set immediately, as another application is responsible for running the 'jobs' and upd ...

c#jqueryajaxperformanceashx

Is AJAX/JSON Referencing the Way to Go?

After making good progress in using JavaScript to fill in values, I've hit a roadblock. Despite checking my references, my html table isn't displaying any output. The goal is simple - extract values from a JSON retrieved by an API and insert the ...

javascriptajaxjson

Tips for adding an avatar to a div in Ionic7, similar to the image depicted

I am attempting to create this design on ionic 7 using an ionic avatar with SCSS styling. However, I am struggling to achieve the desired outcome. Can anyone assist me in implementing this? Click here to view the image Below is my SCSS code: ion-avatar { ...

htmlangularionic-frameworksass

What is the optimal parameter order when utilizing pre-curried functions and composition in JavaScript?

We have a simple, mathematically curried function for subtracting numbers: function sub(x) { return function (y) { return x - y; }; }; sub(3)(2); // 1 The function signature matches the obtained result. However, when function composition comes i ...

javascriptparametersfunctional-programmingcompositioncurrying

"Combining elements shatters the flow of the Ajax

Currently, I am in the process of creating an Ajax call that will initially check whether a specific post ID has already been voted on. The PHP code I am working on involves retrieving the post IDs, checking if they are empty, setting them if they are, or ...

javascriptphpjqueryajaxwordpress

Utilize the get method to showcase data in a material UI table for a React application

Just starting out with React. Managed to create a table component with hard-coded data. However, I now have all the data stored in table.json. Can someone guide me on how to fetch values from table.json using an axios get request an ...

htmlreactjsreduxaxiosmaterial-ui

Securing Angular 2+: Safeguarding Server-Side Lazy Loaded Modules

In my Angular 2+ application, users input personal data that is then analyzed in a different section of the app restricted to authorized personnel. The challenge lies in preventing unauthorized individuals from gaining insight into the analysis process. We ...

javascriptnode.jsangularexpress

Utilizing Selenium for text input

Just starting out with selenium and looking for guidance. Picture this scenario: there are two boxes, one where a user can input a message, and another where that message will be displayed. I'm currently working on using selenium and java to send text ...

javahtmlseleniumselenium-webdriver

Challenge with form validation

Currently, I am utilizing the jQuery validation plugin to handle form validation. However, I have encountered an issue when using inline labels. Here is an example: <input type="text" name="myinput" value="Enter your ...."> In this specific scenar ...

jqueryvalidationlabelwatermark

Update the header on the vis.js timeline for better visibility on the page

The updated library now includes fixed headers within the chart itself, which is a great improvement. However, we feel that it only solves half of the issue at hand. Customizing the headers is still a challenge, so I implemented a separate row to display ...

jqueryhtmlcsstimelinevis.js

Placing an eye icon on the password input field for optimal visibility and positioning

I am currently working on a Node.js project and I am attempting to incorporate an eye icon using Bootstrap into the password input field for visibility. Below is the code snippet of my input field: <div class="container"> <form ...

javascripthtmlcssbootstrap-4

Docker: CORS policy is blocking access to XMLHttpRequest

After creating an ASP.NET Web Application (.NET Framework) project in Visual Studio 2022 and adding a web service to it, everything seemed to work fine when testing the web service call on Local IIS. However, things took a different turn when I tried runni ...

javascriptdockerdocker-compose

Refresh data on Table with AJAX and a repeated process

I am relatively new to Javascript and Ajax, so please bear with me as I explore... My goal is to update a table after inserting a new row. Instead of generating an entire HTML table through Ajax output, I would prefer to gather data from a PHP MySQL datab ...

javascriptphpajaxhtml-table