Moving pictures using css3 transitions

Trying to create a straightforward image slider.

Below is the provided JavaScript code:

$(document).ready(function() {
  $('#slide1_images').on('click', 'img', function(){ 
    $("#slide1_images").css("transform","translateX("+$(this).index() * -450+"px)");
  });
});

The issue seems to be that it doesn't register a click on the correct image but rather on the next one. Any suggestions?

Here's a live example:

http://jsfiddle.net/y4BkQ/

Answer №1

The .index() method will provide a zero-based index value. To adjust for human readability, the formula used is ($(this).index() + 1) * 450.

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

Is it possible for me to replicate this full-screen flash animation using jQuery?

I need some guidance on how to create an animation similar to the one on http://flatuicolors.com without using flash. When you click a color on the website, it triggers a full screen animation with text. I'm not asking for code, just ideas on how to ...

Unable to turn off X-Powered-By: Express

After attempting to use app.disable("x-powered-by"); without success, I came across some helpful posts on the topic: how to remove X-Powered-By in ExpressJS Can't get rid of header X-Powered-By:Express I am using "express": "^4.16.4" as backend a ...

Angular - Ensure completion of a function call before continuing with the code execution

I'm currently working on developing a code snippet that checks for potential adverse drug reactions between two medications. Within my checkForClash() function, there is a call to getCollisionsList(), which is responsible for populating the interacti ...

Swap out .h and .m files within an iOS project's bundle directory in real-time

I am currently using the calculation.h and calculation.m files for some calculations in my project. These calculations may need to be modified while the application is live on the store. Therefore, I can only make changes to these calculations and update t ...

React: Updating State with the Spread Operator and Array Method to Add Elements to an Array

Link to my jsfiddle code snippet: https://jsfiddle.net/ilikeflex/r2uws1ez/30/ I've been attempting to update the state in React by accessing the previous state. There are three different cases where I'm trying to achieve this, but I'm havin ...

What is the best way to transmit the server response information from a fetch API to the client?

After receiving a response with the expected results from an API call using fetch API and a json object, I am looking for ways to send these results to the client in order to display them on the interface. The server-side operation was conducted through th ...

Display text with ellipsis on one of the two spans within a container

I'm struggling with implementing ellipsis in my HTML code. Here's what I have: <div id="wrapper"> <span id="firstText">This text should be displayed with an ellipsis</span> <span id="lastText">this text should not ...

Exploring the concept of passing 'this' as a parameter in JavaScript

<button type="button" aria-haspopup="dialog" aria-controls="b" onclick="openLayer($('#b'))"> button</button> <div role="dialog" id="b"><"button type="button">close<"/button></div> function openLayer(target){ ...

iOS 8 home screen web apps with status bar overlay and footer bar integration

After installing a web application to 'home' and working with it, I noticed that a recent update to iOS has made the usual black status bar transparent and float above the web content below. In addition, there is an unseen horizontal bar at the ...

Which types of characters am I allowed to include in an HTTP response body while using NodeJS and Express?

I am currently developing a node express app that responds to an AJAX post from the client browser. I am curious about what characters would be considered invalid to include in the HTTP response body. My response header specifies the use of charset=utf-8, ...

The ng-model-options in Angular 2 is set to "updateOn: 'change blur'"

Currently working with angular 2, I am seeking a solution to modify the behavior of ngModel upon Enter key press. In angular 1.X, we utilized ng-model-options="{updateOn: 'change blur'}". How can this be achieved in angular 2? For reference, her ...

Injecting Dependencies Into ExpressJS Routes Middleware

Hey there! I'm currently working on injecting some dependencies into an expressjs route middleware. Usually, in your main application, you would typically do something like this: const express = require('express'); const userRouter = requi ...

Ajax is failing to produce any source code at the moment

After implementing a script on my website to create a chained selection system, I encountered an issue when trying to incorporate the generated data into my search script. Unfortunately, it seems that the source code produced is not usable for this purpose ...

Issue with binding classes dynamically in vue with svg elements

I'm attempting to create a custom typing program for one of my students using SVG to display the words and class binding with Vue.js. The goal is to change the color of the characters when the correct key is pressed by the user. However, I've enc ...

Utilizing JQuery and AJAX to upload unprocessed data to a WebAPI

I need help figuring out how to send raw data to a webAPI using JQuery and Ajax. I've been struggling to make the data get transmitted successfully. The API endpoint functions correctly in Postman: Here is my simple JQuery code: $.ajax({type: "POST ...

Troubleshooting problem with list rendering in a Nativescript-vue GridLayout

As a newcomer to nativescript, I am utilizing GridLayout in an attempt to optimize layout nesting for better performance. In my template, I have an image followed by a vertical list of four items next to it. However, only the first item on the list is visi ...

Using a loop variable within a callback function in JavaScript/TypeScript: Tips and tricks

I have a method in my TypeScript file that looks like this: getInitialBatches() { var i = 0; for (var dto of this.transferDTO.stockMovesDTOs) { i++; this.queryResourceService .getBatchIdUsingGET(this.batchParams) ...

Is it possible to use window.print() to print the entire contents of a DIV with both horizontal and vertical scroll bars?

In my code, I have a div that contains both horizontal and vertical scrollers. Whenever I try to print the content inside this div using the window.print() method, it only prints the visible portion of the div. Here is the code snippet that I have attempte ...

Issues with utilizing destructuring on props within React JS storybooks

I seem to be encountering an issue with destructuring my props in the context of writing a storybook for a story. It feels like there may be a mistake in my approach to destructuring. Below is the code snippet for my component: export function WrapTitle({ ...

Insert an HTML tag into JSLint

Is there a way to include an HTML tag in JSLint's list of recognized tags? I'm encountering some errors with the following message: JSLint: Unrecognized tag 'foo'. How can I make the foo tag recognized by JSLint as a valid HTML tag? ...