Finally somebody that talks and explains what is going on instead of blasting dumb music and moving a cursor around their code. Thumbs up for this guy!
From all the exemples I've searched for this one is the best I find and modify to my current project. I added data-delay and data-crossfade and if statement to the js to enable both example to be used in different situations Thanks a lot
Amazing! Thanks mate! Glad to hear that using this as a starting point, you modified according to your specific needs. All the best, keep coding!! And have a lovely new year 🙂💙
Hi! Thank you so much for this video! I am using the slideshow for the hero section at the top but when I do position absolute, the rest of the content below it on my webpage gets pushed up being out of the document flow. How do I keep the rest of my contents, the stuff below it from moving up into my hero section? I'm totally new to all this so any help would be appreciated!!
Hey 🙂 Well, obviously it is very hard to debug without looking at your code...it should work fine...(btw you can find a link to the code in the description). From what you are describing maybe this happens because you didn't set height for the hero section (which contains the slideshow) e.g. .hero { height: 100vh; position: relative; ... } Hope this works! Keep coding 😉🙂
@@CodingJourney Thank you so much for taking the time to write back, I didn't expect such a quick response. I really appreciate that! I have tried setting the height to the hero section but depending on the screen size, the elements still appear over my hero image. But I guess I can try adjusting the "top" number to the absolute and the height of the hero section and try to get a happy medium? Sorry for all these questions. Yes, I'm trying my best to keep coding and learning!
No problem 🙂 But again, it is very hard to debug without looking at your code...especially if you are a beginner, it could be anything! No you definitely don't have to adjust the "top" number. Btw make sure that your hero section is not absolutely positioned (as mentioned in my previous answer). In the description you can find a link to the working project. If you add content after the "header" you will see that it is added after the header (not on top of it). You can copy the code and take it from there! Congrats on your efforts, keep it up and you will definitely get where you want to be!! 💙
Thanks 4 the video. I am getting an error TS1005:';' expected , after the "block" in: slideshowImages[currentImageCounter].style.display = "block". In the function nextImage(). Do you know what the problem might be?
Thanks for this tutorial. I'm having trouble, I have done everything in the video but I have put the slideshow into a div instead of header. I already have my nav bar within the header.... I can't get the slide show to work this way. Are you able to help?
Hey man! There shouldn't be any difference whether you use header or div, so if you just change header to div it should still work fine. You can find a link in the description to the final project, in case you want to compare with your code! If you still can't figure it out, feel free to send me a link to the specific part you are trying to implement (e.g. CodePen link) and I could have a look. All the best, keep coding!! 😉🙂
Hey what's up Jacob! Since I'm not sure where to start, let's start from the beginning 🙂 % is the modulus operator. Modulus is the remainder of the euclidean division of one number by another. e.g. 9 % 4 = 1 (since 9 divided by 4 equals 2 and 1 remains) 4 % 9 = 4 (since 4 divided by 9 equals 0 and 4 remains) 9 % 9 = 0 (since 9 divided by 9 equals 1 and 0 remains) So in our example, suppose we have a total of 3 images => images.length = 3. Starting with currentImageCounter 0 these are the values we would get in first few iterations: currentImageCounter = 1 % 3 // => 1 currentImageCounter = 2 % 3 // => 2 currentImageCounter = 3 % 3 // => 0 currentImageCounter = 1 % 3 // => 1 currentImageCounter = 2 % 3 // => 2 currentImageCounter = 3 % 3 // => 0 currentImageCounter = 1 % 3 // => 1 etc... So, this way we ensure that currentImageCounter will cyclically get the values (0, 1, 2, ... images.length-1) Hope this helps! Keep coding!!! 😉🙂
Thank you so much man, this was really helpful... But I'd like to ask... Rather than having them blur out and then reappear, how can we have the images slide in from the left side of the screen with a transition delay also... I'd appreciate your help on this. Thanks again.
Amazing! Very glad you liked it 🙂 Well, I structured the project specifically for a simple fade animation (changing opacity)...If I were to animate multiple properties I would probably take a different approach (maybe using css animations). Anyway, a quick and dirty way to also zoom-in adjusting to this project would be the following: 1. .intro {...overflow: hidden;} 2. .intro-slideshow img {...transform: scale(1); transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out;} 3. In JavaScript whenever you change opacity also change transform: slideshowImages[currentImageCounter].style.opacity = 1; slideshowImages[currentImageCounter].style.transform = "scale(1.2)"; and slideshowImages[currentImageCounter].style.opacity = 0; slideshowImages[currentImageCounter].style.transform = "scale(1)"; That should do the job! Feel free to experiment (maybe also zooming out or animating other properties). That's the best way to learn stuff! All the best! Keep coding 😉🙂
Hi there, great video. thanks to you I have managed to get a functioning slide show working for my project. Though I am having one issue, my slideshow containers 12 images, so when I load / reload the site it takes almost over 30 seconds for the slideshow to start moving between images, is there any solution to this? Thanks. 👍
Hey thanks, glad you found this useful. There shouldn't be a delay...there's a link to the code in the description in case you want to double check. The other thing I can think of is that maybe your images are too large/high resolution...image optimization is a huge topic, but at least make sure your images are not huge (I usually use 1920x1080 for desktop) and also optimized using some image compressor (e.g. compressor.io or tinypng.com). All the best, keep coding!!
Hellow, the slider is not repeating, i have a total of four images, once the loop ends it doesn't starts again, and I coppied exactly the same you write the code.
Hey! Obviously, I can't debug without looking at your code...if you did everything exactly the same way it should work... In the description you can find a link to this project (code and result). If that works fine on your browser, then try to compare the code of the project to your code...I am quite confident that eventually you will make it work!! If, however, it is impossible to make it work, you can send me a link to your project (e.g. CodePen or GitHub) and I will have a look. Good luck!
Hey man, I really love this tutorial but I'm having a hard time doing this in a functional approach, so the variables like slideshowingaes, nextImageDelay, currentImageCounter are not declared outside. Could you help me with that? I just want them to be inside a function :
Finally somebody that talks and explains what is going on instead of blasting dumb music and moving a cursor around their code. Thumbs up for this guy!
Thaaaaanks 🙂💙💙
From all the exemples I've searched for this one is the best I find and modify to my current project. I added data-delay and data-crossfade and if statement to the js to enable both example to be used in different situations
Thanks a lot
Amazing! Thanks mate! Glad to hear that using this as a starting point, you modified according to your specific needs. All the best, keep coding!! And have a lovely new year 🙂💙
Awesome. You explained everything really simply. Really useful. Thank you very much.
My pleasure, glad it was helpful 🙂 Thanks for the lovely comment 💙💙
Thank you for this video. Just what I needed.
Amazing! My pleasure 🙂💙
Really well explained video!
Oh thank you 🙂 Very glad you liked it!! 💙
Excellent, thank you
My pleasure, glad you liked it! 💙
how do you implement manual sliding to your js ?
How do i play continuously my slideshow? It stop when it reach to the last pic. Ty
Very useful and great explanation, made super simple. Thanks!!!
Glad you liked it! Pleasure is all mine 🙂
I do love your work.
Thanks man! I do love your comment 😉🙂
Hi! Thank you so much for this video! I am using the slideshow for the hero section at the top but when I do position absolute, the rest of the content below it on my webpage gets pushed up being out of the document flow. How do I keep the rest of my contents, the stuff below it from moving up into my hero section? I'm totally new to all this so any help would be appreciated!!
Hey 🙂 Well, obviously it is very hard to debug without looking at your code...it should work fine...(btw you can find a link to the code in the description). From what you are describing maybe this happens because you didn't set height for the hero section (which contains the slideshow) e.g.
.hero {
height: 100vh;
position: relative;
...
}
Hope this works! Keep coding 😉🙂
@@CodingJourney Thank you so much for taking the time to write back, I didn't expect such a quick response. I really appreciate that! I have tried setting the height to the hero section but depending on the screen size, the elements still appear over my hero image. But I guess I can try adjusting the "top" number to the absolute and the height of the hero section and try to get a happy medium? Sorry for all these questions. Yes, I'm trying my best to keep coding and learning!
No problem 🙂 But again, it is very hard to debug without looking at your code...especially if you are a beginner, it could be anything! No you definitely don't have to adjust the "top" number. Btw make sure that your hero section is not absolutely positioned (as mentioned in my previous answer). In the description you can find a link to the working project. If you add content after the "header" you will see that it is added after the header (not on top of it). You can copy the code and take it from there! Congrats on your efforts, keep it up and you will definitely get where you want to be!! 💙
@@CodingJourney Thanks so much again!! I appreciate this!! =)
Hi, Is there a way that we can view multiple slideshow running on same page?
Thank you !
🙏💙🙂
Thanks 4 the video. I am getting an error TS1005:';' expected , after the "block" in: slideshowImages[currentImageCounter].style.display = "block". In the function nextImage().
Do you know what the problem might be?
Thank you for yours tutorials.
Thanks man! Pleasure is all mine 🙂
very good
Great!!! How I recurive display all images in folder please?
Thanks for this tutorial. I'm having trouble, I have done everything in the video but I have put the slideshow into a div instead of header. I already have my nav bar within the header.... I can't get the slide show to work this way. Are you able to help?
Hey man! There shouldn't be any difference whether you use header or div, so if you just change header to div it should still work fine. You can find a link in the description to the final project, in case you want to compare with your code! If you still can't figure it out, feel free to send me a link to the specific part you are trying to implement (e.g. CodePen link) and I could have a look. All the best, keep coding!! 😉🙂
I'm confused on how currentImageCounter = (currentImageCounter+1)%images.length makes the slideshow repeat. Can someone explain that to me?
Hey what's up Jacob! Since I'm not sure where to start, let's start from the beginning 🙂
% is the modulus operator. Modulus is the remainder of the euclidean division of one number by another.
e.g.
9 % 4 = 1 (since 9 divided by 4 equals 2 and 1 remains)
4 % 9 = 4 (since 4 divided by 9 equals 0 and 4 remains)
9 % 9 = 0 (since 9 divided by 9 equals 1 and 0 remains)
So in our example, suppose we have a total of 3 images => images.length = 3. Starting with currentImageCounter 0 these are the values we would get in first few iterations:
currentImageCounter = 1 % 3 // => 1
currentImageCounter = 2 % 3 // => 2
currentImageCounter = 3 % 3 // => 0
currentImageCounter = 1 % 3 // => 1
currentImageCounter = 2 % 3 // => 2
currentImageCounter = 3 % 3 // => 0
currentImageCounter = 1 % 3 // => 1
etc...
So, this way we ensure that currentImageCounter will cyclically get the values (0, 1, 2, ... images.length-1)
Hope this helps! Keep coding!!! 😉🙂
great tutorial
Oh thank you 🙂 Very glad you liked it!!
hello.my friend thank you for sharing
Hey mate! Glad you liked it, pleasure is all mine 😉💙
Can you make a video of sliding paragraphs with the images?
Thanks!
My pleasure 🙂
Hey man how to make a stats counter using vanilla ja
Thank you so much man, this was really helpful... But I'd like to ask... Rather than having them blur out and then reappear, how can we have the images slide in from the left side of the screen with a transition delay also... I'd appreciate your help on this. Thanks again.
It was very simple and easy to understand! Thank you!!😄
How do I add a zoom up animation to this slide show? (I'm sorry, my English is not good...)
Amazing! Very glad you liked it 🙂 Well, I structured the project specifically for a simple fade animation (changing opacity)...If I were to animate multiple properties I would probably take a different approach (maybe using css animations). Anyway, a quick and dirty way to also zoom-in adjusting to this project would be the following:
1. .intro {...overflow: hidden;}
2. .intro-slideshow img {...transform: scale(1); transition: opacity 0.75s ease-in-out, transform 0.75s ease-in-out;}
3. In JavaScript whenever you change opacity also change transform:
slideshowImages[currentImageCounter].style.opacity = 1;
slideshowImages[currentImageCounter].style.transform = "scale(1.2)";
and
slideshowImages[currentImageCounter].style.opacity = 0;
slideshowImages[currentImageCounter].style.transform = "scale(1)";
That should do the job! Feel free to experiment (maybe also zooming out or animating other properties). That's the best way to learn stuff!
All the best! Keep coding 😉🙂
@@CodingJourney thanks!!
Hi there, great video.
thanks to you I have managed to get a functioning slide show working for my project.
Though I am having one issue, my slideshow containers 12 images, so when I load / reload the site it takes almost over 30 seconds for the slideshow to start moving between images, is there any solution to this?
Thanks. 👍
Hey thanks, glad you found this useful. There shouldn't be a delay...there's a link to the code in the description in case you want to double check.
The other thing I can think of is that maybe your images are too large/high resolution...image optimization is a huge topic, but at least make sure your images are not huge (I usually use 1920x1080 for desktop) and also optimized using some image compressor (e.g. compressor.io or tinypng.com).
All the best, keep coding!!
Thanks for the quick reply, I will double check everything in your code. 👍
Hellow, the slider is not repeating, i have a total of four images, once the loop ends it doesn't starts again, and I coppied exactly the same you write the code.
Hey! Obviously, I can't debug without looking at your code...if you did everything exactly the same way it should work... In the description you can find a link to this project (code and result). If that works fine on your browser, then try to compare the code of the project to your code...I am quite confident that eventually you will make it work!! If, however, it is impossible to make it work, you can send me a link to your project (e.g. CodePen or GitHub) and I will have a look. Good luck!
Hey man, I really love this tutorial but I'm having a hard time doing this in a functional approach, so the variables like slideshowingaes, nextImageDelay, currentImageCounter are not declared outside. Could you help me with that? I just want them to be inside a function :
i love you so much!
Heheh!! My favorite comment 😉💙💙
👍💜
💙💙🙂
almost everything works for me except the opacity part but thank you
nice
I LOVE YOU
💙💙💙🙂