Automatic Slider Animation, A Unique Twist

Looking for help with creating an automatic infinite slider that swipes left and right? Check out this code snippet!

If anyone can assist with achieving this, it would be greatly appreciated.

Link to the CodePen: http://codepen.io/Taron/pen/jyeIi

JavaScript Code Below:

window.addEventListener('load', onWndLoad, false);

function onWndLoad() {
    var slider = document.querySelector('.slider');
    var sliders = slider.children;

    var initX = null;
    var transX = 0;
    var rotZ = 0;
    var transY = 0;

    var curSlide = null;

    var Z_DIS = 50;
    var Y_DIS = 10;
    var TRANS_DUR = 0.4;

    var images=document.querySelectorAll('img');

    for(var i=0; i<images.length; i++) {
        images[i].onmousemove = function(e) {
            e.preventDefault();
        }
        images[i].ondragstart = function(e) {
            return false;
        }
    }

    function init() {
        var z = 0, y = 0;

        for (var i = sliders.length-1; i >= 0; i--) {
            sliders[i].style.transform = 'translateZ(' + z + 'px) translateY(' + y + 'px)';
            z -= Z_DIS;
            y += Y_DIS;
        }

        attachEvents(sliders[sliders.length - 1]);
    }

    function attachEvents(elem) {
        curSlide = elem;
        
        curSlide.addEventListener('mousedown', slideMouseDown, false);
        curSlide.addEventListener('touchstart', slideMouseDown, false);
    }

    // Additional JavaScript functions...
    
}

// Continue adding more JavaScript functions here...

Answer №1

Here is a potential solution for implementing an automatic slide feature.
Check out the preview link Codepen
I have made some modifications to your code by adding a section for auto-sliding at the end of your JS code.
Look for the comment Auto slider START.
This will continuously slide one to the left and then back to the right.

UPDATE

You can indeed rotate only the first card without affecting the rest, as you mentioned in a comment.
Take a look at the updated preview here Codepen
Within the function slideMouseMove, there is a for loop labeled with the comment //remains elements, simply comment out the entire for loop and that should solve the issue.

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

Node.js: Attempting to arrange ISO dates based on their time span

I am currently working on creating a line chart using the chart.js library. In order to do this, I have an array that contains ISO dates and my goal is to determine which ISO dates belong to the same hour and day. This information will then be used to gene ...

Ensure that Mathjax underscores are consistent with the height of other characters

Presented below is the latex code being used with Mathjax. \class{mathjaxCursor}{\text{_}} ...and here is the accompanying css: .mathjaxCursor { font-weight: bold; background-color: red; } This setup results in the following display: ...

JS: The for loop will keep iterating even if the condition becomes false

Can anyone help me understand why my for loop is continuing even after the conditions are met? Unfortunately I can't share the entire file due to its size, but here is a snippet of the loops: for (var j = 0; j < depKeyArr.length; j++) { var di ...

Maintaining the placement of dialogue boxes within the screenplay

I am facing an issue with displaying dialog boxes within a form. When I assign a div inside the form to a dialog, it gets moved to the bottom of the script and is no longer contained within the form element. As a result, I am unable to submit the values. ...

What is the best way to parse a JSON file and create a dynamic webpage using jQuery with the data from the

As someone who is new to working with Node.js and JSON, I am encountering some issues when trying to extract data from a JSON file. Below is the code that I have written: 'use strict'; const fs = require('fs'); let questsRawData = fs ...

Triggering event within the componentDidUpdate lifecycle method

Here is the code snippet that I am working with: handleValidate = (value: string, e: React.ChangeEvent<HTMLTextAreaElement>) => { const { onValueChange } = this.props; const errorMessage = this.validateJsonSchema(value); if (errorMessage == null ...

Error: Unable to iterate through users due to a non-function error while attempting to retrieve the firestore document

I encountered an issue with my code, receiving the error message: TypeError: users.map is not a function. Can anyone help me identify what might be wrong? const [users, setUsers] = useState([]); const getData = async () => { try { const use ...

Is there a way to automatically transfer the ID from the first table to the id_position field in the second table upon clicking submit?

I'm dealing with two tables and I need to figure out how to add the id of the first table to the position_id field of the second table upon submitting. My request is done through ajax. The fields for the second table are dynamic, meaning you can keep ...

Add the item to a fresh array using the Ajax function

Here is an array that I have: var arrayOfResults = []; // Results after like statement After making a database call, I receive a JSON result like this: [{ "id": "{fcb42c9c-3617-4048-b2a0-2600775a4c34}", "pid": "{34214CCB-90C3-4D ...

What is causing the table to not be displayed in this Javascript program when it is used in a

I am currently experimenting with incorporating an infinite loop before the prodNum and quantity prompts to consistently accept user input and display the output in a table. Although the program is functional when executed, it fails to showcase the table ...

Executing a function by clicking on a DIV with the value of a textbox, instead of clicking directly on the textbox

Here is a function I have: $("#border-radius").click(function(){ var value = $("#border-radius").attr("value"); $("div.editable").click(function (e) { e.stopPropagation(); showUser(value, '2', this.id) $(this).css( ...

JSON Eval function encountered an identifier that was not anticipated

Here is a code snippet that I found for rating a page. It works perfectly on my local machine, but once I upload it to the server, it throws a syntax error. function rtgAjax(elm, ratev) { var cerere_http = get_XmlHttp(); // get XMLHttpRequest object ...

Inquire regarding the header image. Can you confirm if the current HTML and CSS for this is the most efficient approach?

This is a preview of my website in progress (Disclaimer: I'm currently learning HTML to build this site, design comes next. I know it's not the conventional way to design a site, but oh well) Check out the site here Is the HTML code for the hea ...

Regain Identification or Data using PHP, JavaScript, and MySQL

I'm currently working on a project and I'm facing a challenge in retrieving Id either in php or js. I have 2 rows in the same table in mySql: row 1 = id_answer and row 2 = text. I am using a foreach loop in my code to extract the text from the ...

The Datalist feature in HTML5 offers an auto-suggest functionality that displays a list of options beginning with the

In my project, I am utilizing HTML5 Datalist for autosuggestion. By default, HTML5 follows the keyword contains approach rather than the starts with approach. For example, if my datalist includes one, two, three and I type "o" in the search box, it displ ...

Attempting to retrieve data from local server 3000 to local server 3001 resulted in an unexpected termination of the input stream

After attempting to make a GET request to the Serp API directly from a React application, I discovered that it was not possible. To work around this issue, I created a local server and implemented the necessary logic. After testing the server using Postman ...

Display alternative component upon button click in React.js

After creating the default layout, I'm aiming for a scenario where clicking each button only alters specific parts of the layout through the content component. React router is being utilized to manage different pages. Each button corresponds to a uni ...

Successful Ajax call results in the retrieval of CSRF token without any message being returned

While I was able to successfully send emails using AJAX with PHP, I've been facing issues getting it to work with Laravel 5.2. My goal is simple - sending an email through AJAX upon form submission. Let's take a look at my routes.php snippet res ...

Adjust the location.hash and then navigate using the Back button - Internet Explorer displays unique behavior compared to other web browsers

When updating `location.hash`, all browsers behave correctly by only changing the URL without refreshing the page. However, pressing the Back button in Internet Explorer and other browsers results in different behaviors. IE fails to update the history wit ...

"Encountering a double loading of my jquery-1.7.2.min.js file during an ajax call

Is there anyone who can assist me in resolving the following issue? I am currently facing a problem where my jQuery ajax call is causing my JavaScript file to load twice, therefore resetting it to its original position. This issue is occurring while work ...