Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Users Search
Help Dashboard Sign In Sign Up
Q&A Code Reviews Meta
Q&A
Posts Tags Edits
Ask Question

Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Comments on setting of translateX for carousel image slider

Post

setting of translateX for carousel image slider

+3
−0

I made carousel image slider by following tutorials.

To slide images , I made the below function.

const moveToSlide = (track, currentSlide, targetSlide) => {
track.style.transform = 'translateX(-' + targetSlide.style.left + ')'; 
currentSlide.classList.remove("current-slide"); 
targetSlide.classList.add("current-slide"); 
 }

I can't figure out how it works when you click "left" button. I think it should be

'translateX(+ ' + targetSlide.style.left + ')';

if you want to slide to left. I think I'm misunderstanding something....

javascript carousel image transformation
posted about 3 years ago
3y ago
user card
aya2222‭
16 reputation 1 0 3 1
History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.
Why should this post be closed?

1 comment thread

Start by inspecting the actual transform string passed to track.style.transform (2 comments)
Start by inspecting the actual transform string passed to track.style.transform
elgonzo‭ wrote about 3 years ago · edited about 3 years ago
copy link

Unless you want to play a game of pinning the tail on the donkey, it is in my opinion it good idea to start troubleshooting/debugging by outputting the composed string 'translateX(+ ' + targetSlide.style.left + ')' to the (browser) console so you can inspect the actual transform string your code is setting. Check whether the translation values in that string are valid (i.e., a number including a unit) and whether the values are what you would expect.

elgonzo‭ wrote about 3 years ago · edited about 3 years ago
copy link

That said, what's up with the + character followed by a space in your transform string? What could this possibly achieve that a transform string without that + char could not? I speculate that the space after the + char is perhaps making for invalid numbers (+1 might perhaps be a valid number, but perhaps + 1 would not be a valid number as far as parsing transform strings is concerned; but i do not really know...)