6 Correct answers
Here is a basic of what I understood :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swap images</title>
</head>
<body>
<button id="myButton">Swipe</button>
<img id="myImg" src="" alt="Image">
<script>
// Here you create your array
const images = [
'a-one.jpg',
'a-two.jpg',
'a-three.jpg',
// add all images th
You already have a good reply as a solution but I'll throw this one into the mix just incase arrays like the following = const images = ['blah' , 'blah' , 'blah'] are a bit daunting to you.
You can still hard code the images into the html as you may usually do and then use css to hide them and javascript to create an array from them, just add your own images, instead of image_1.jpg, image_2.jpg etc:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Through Images</titlHow do we attach an event listener to the image object? and get the image carousel to scroll backward? The demo video is attached along with the coding.
By @AmySykes
Add the below javascript directly before the closing </script> tag:
images.forEach(function(img) {
img.onclick = function() {
images.forEach((img) => {
img.classList.remove('active')
})
if(count === 0) {
count = 0;
}
else {
count--;
}
images[count].classList.add('active');
}
})
All you have to do is google the subject, and you'll find tons of tutorials on the web. they're all pretty good, but it mostly depends on the entry level, the level covered, and the need to put it into practice at the same time, otherwise it remains mainly theoretical.
Regarding the basics, the link indicated by @BenPleysier can only be confirmed, MDN is a real source for beginners and experts alike, a must have!
As a complement, you can also start with :
...
Happy Monday!!
If this was written out the long way without arrow functions how would that look?
images.forEach(function(img) {
img.onclick = function() {
images.forEach((img) => {
img.classList.remove('active')
})
if(count === 0) {
count = 0;
}
else {
count--;
}
images[count].classList.add('active');
}
})
By @AmySykes
NOT a great deal of difference:
NO ARROW FUNCTION VERSION:
images.forEach(function(img) {
img.onclick = function() {
images.forEach(function(img) {
img.classList.remove('active')
})
if(count === 0) {
34
Replies
Your approach is also a nice solution, but it's double-edged...
By @L e n a
Yep, it's really aimed at those that have not yet progressed to a more advanced level of implementing a workflow using arrays which bring another dimension to the party. It might also be useful in terms of a limited amount of images being used in an auto rotating hero section. I'd consider having some kind of fade in effect on the images rather than just suddenly appearing, it adds a bit of a smoother result.
Your idea of using a transition between slides is one of them, and can be implemented either directly in HTML, or on the fly through elements created dynamicaly in the code, then it all depends on each person's wishes and approach.
By @L e n a
Using your original code example:
Include a function AFTER 'let index = 1;'
function fadeIn() {
image.classList.add('fadeIn');
setTimeout(function() {
image.classList.remove('fadeIn');
}, 700)
}
//Evoke function on page load
fadeIn();
Then call the function again when the button is clicked:
bouton.addEventListener('click', () => {
// Evoke function when button is clicked
fadeIn();
Add the css:
.fadeIn {
animation: fadeIn 700ms forwards ease;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
This will provide a basic fadeIn image effect which will soften the transition between images.
For a fade in/fade out effect that gets a bit more complex as you need to have 2 images on the page which morph into one another, that is not possible by just replacing the src link for another src link
Yes you’re right one need to add a second image and just few lines of code to yours.
To simplify, I posted the code on the studio demo’s page :
https://demo.puce-et-media.com/AmySykes/version-4.htmlBy @L e n a
Yup, that's how it should be done, in my opinion, when swapping between images, always looks a lot more professional for just a little bit of extra thought and work.
@osgood_ , you're preaching to the choir, the question isn't about that but about not marking comments as good answers when they are just comments.
By @L e n a
Does that really matter that much....I mean the DW forum is hardly a place that attracts so much traffic that its going to be a huge concern? I'm sure anyone that runs across this thread can work it for themselves, if not, then they are probably already dead.........I would assume.
How do we attach an event listener to the image object? and get the image carousel to scroll backward? The demo video is attached along with the coding.
By @AmySykes
Add the below javascript directly before the closing </script> tag:
images.forEach(function(img) {
img.onclick = function() {
images.forEach((img) => {
img.classList.remove('active')
})
if(count === 0) {
count = 0;
}
else {
count--;
}
images[count].classList.add('active');
}
})
AdChoices