I'm working on a touchable image slider in JavaScript, and I open the console (after I click on "Inspector") and see this error:
SyntaxError: missing ) after argument list
Here is the whole code written in PUG for the file that I think is the one that has something wrong:
doctype html
html
head
meta(
name="viewport",
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabel=no",
)
style.
body {
overflow: hidden;
}
.image {
height: 100vh;
width: 100vw;
}
.image-list {
display: flex;
flex-wrap: nowrap;
position: absolute;
left: -170%;
}
head,
body {
height: 100%;
}
body
.image-list
each image in ['lavender', 'lavenderblush', 'pink']
.image(style=`background-color:${image}`)=image
script.
const imageElementList =
[... document.querySelectorAll('.image')];
imageElementList.map(imageElement => {
const imageElementDimensions =
imageElement.getBoundingClientRect();
const windowWidth = window.screen.width;
let start = 0,
end = 0;
imageElement.addEventListener('touchstart', e
=> {
start = e.touches[0].clientX;
console.log(start)
})
imageElement.addEventListener('touchend', e => {
end = e.changedTouches[0].clientX;
console.log(end)
const direction = start - end;
if(direction > 0) {
console.log('left',
imageElementDimensions.left,
windowWidth)
//- Decrease the left style property
imageElement.style.left = (imageElementDimensions.left - windowWidth) + 'px';
} else {
console.log('right')
}
})
})
Here is the link of the video on YouTube for you to see what the result should look like: https://www.youtube.com/watch?v=tm_vSJFMqwA&list=PLlgRhtOkjmmDaca6lcyJ2DYh6GNAXzrto&index=4
Can somebody help? Thanks.
The problem was that in .image-list
, I had entered in: left: -170%;
which I didn't want. I re-watched the YouTube video and it worked alright after I had added some of the code that the tutorial had mentioned.