I apologise for my english.
This tutorial is about creating a cool slideshow for your website.
Language : HTML /CSS and JavaScript
Effect : Fade-In
Duration: 1h
Source Code: https://www.dropbox.com/s/pkb6eyok6o8ddz2/SlideShow.rar
Music: Two Steps From Hell (Mix)
If you have any questions / doubts , leave a comment , I will try to answer them.
This is my first I.T tutorial , so before you judge me you should know , there are many ways to get the same result , there are better ways , but there is always a better way.
——————–
Guys , try my new game for android … I know its not much , but i would like your opinion , tnx 🙂
https://play.google.com/store/apps/details?id=com.manasegeczi.PlanePass
Original source
40 responses to “Slideshow tutorial – JavaScript”
i get so excited with this music that i hit my monitor .-.
How can we link href tag with images. I mean when users click on image I want to jump to another html link.
https://play.google.com/store/apps/details?id=com.ManaseGeczi.QuickRoll
I just made a new game for Android 😀
Let me know what you think about it , feel free to rate and leave a comment.
It's in early version , so you may encounter minor bugs.
Don't hesitate to let me know about them.
Thank you 🙂
I can't believe people are complaining about the video pace, imo its perfect I am little above beginner level and I understood everything perfectly without slowing it down. It gives you a lot of info in short time and its good. For those who have hard time following it, you can just slow it down from settings instead of complaining about it.
hi there 😀 what is the title of your bg music?
Great tutorial, thanks.
how to change the height and width of whole slides?:<
answer please i need that on my project
Hello Mr. Manase,
How have you been? Your Tutorial was a good one and thanks to this, I can now make my pure JS Carousel. I had a look at your code and made it slightly more "smaller/elegant" with JS itself. Please note below:
HTML:
<div class = "carousel_fade_container">
<img src = "images/hero1.jpg" class = "hero_icon" id = "hero1"/>
<img src = "images/hero2.jpg" class = "hero_icon" id = "hero2"/>
<img src = "images/hero3.jpg" class = "hero_icon" id = "hero3"/>
<img src = "images/hero4.jpg" class = "hero_icon" id = "hero4"/>
<div class = "fade_next" id = "id_fade_next">
<img src = "images/left-arrow.png" alt = "LEFT" onClick = "previousFade()"/>
</div>
<div class = "fade_previous" id = "id_fade_previous">
<img src = "images/right-arrow.png" alt = "RIGHT" onClick = "nextFade()"/ >
</div>
</div>
LESS/CSS:
carousel_fade_container{/css codes for the Fading Effect Carousel/
width:100%;
height:600px;
position:relative;
.hero_icon{
width:100%;
height:600px;
border-radius:5px;
position:absolute;
top:0px;
left:0px;
transition:1s;
visibility:hidden;/apply this inorder to show 1 image at a time when JS is being done/
}
.fade_next{
width:10%;
height:600px;
background-color:rgba(0,0,0,0.2);
border-radius:5px;
position:absolute;
left:0px;
top:0px;
img{
width:50px;
height:50px;
position:absolute;
top:50%;
transform:translateY(-50%);
left:20px;
}
}
.fade_previous{
width:10%;
height:600px;
background-color:rgba(0,0,0,0.2);
border-radius:5px;
position:absolute;
right:0px;
top:0px;
img{
width:50px;
height:50px;
position:absolute;
top:50%;
transform:translateY(-50%);
right:20px;
}
}
}
Javascript:
//Javascript codes for the Fade Carousel Effect;
var imageNumbers = 4;//declare the number of images you have in the carousel;
imageShow = 0;
window.addEventListener("load", startUpload);
//this function is just being used once for loading the first picture, after which it has no use..;
function startUpload(){
document.getElementById("hero1").style.visibility = "visible";
document.getElementById("hero1").style.opacity = "1";
startCarouselFade = setInterval(Timer, 4000);//start the fade carousel with a delay of 4 seconds one the document has loaded;
}
function Timer(){
imageShow++;
if(imageShow == imageNumbers){//once you come to the last minute, then reset and go back to the first image, this will help for continuous looping;
imageShow = 0;
}
carouselFadeEffect();
}
function carouselFadeEffect(){
//collect all the images that are in place in HTML document, by targetting their ID Values;
var Vect = new Array(imageNumbers);
for (var i = 0; i < imageNumbers; i++){
Vect[i] = document.getElementById("hero" + (i+1));
}
console.log(Vect[0]);
console.log(Vect[1]);
console.log(Vect[2]);
console.log(Vect[3]);
for (var i = 0; i < imageNumbers; i++){
Vect[i].style.opacity = "0";
Vect[i].style.visibility = "hidden";
}
Vect[imageShow].style.opacity = "1";
Vect[imageShow].style.visibility = "visible";
}
function nextFade(){
imageShow++;
if(imageShow == imageNumbers){
imageShow = 0;//this will help to go to the first element in the Array Vect;
}
carouselFadeEffect();//create the fade effect to the next image;
clearInterval(startCarouselFade);//stop the animation that has been triggered on auto;
setInterval(Timer, 5000);//people will now view the new image for a period of 5 secs post which the next image will auto load;
}
function previousFade(){
imageShow–;
if(imageShow < 1){
imageShow = imageNumbers – 1;//this will help to go back to the last Array Element in the Vect Array;
}
carouselFadeEffect();//creast the fade effect to the previous image;
clearInterval(startCarouselFade);//stop the animation that has been triggered on auto;
setInterval(Timer, 5000);//people will now view the new image for a period of 5 secs post which the next image will auto load;
}
Hope you like it. May not be that small but, tried my best to improve. Do comment and let me know if I could make any further improvements.
Bra the music HELPS! I KEEP GOING 2 SLEEP!!! THANKHS !!!!!!!!!!!!!!!
Loved the video, this one and the 4 part one. I am having trouble getting my Java to work though. I have already checked it and everything looks right. The circles are clickable but they don't lead to the images and my arrows aren't even clickable. Any chance you could help me?
1 question why is there fucking troy music playing in the background
This was helpful but it was in fast forward …. so i m having a problem to understand it..
I want to put the slider inside my container which is below my navigation menu bar instead of putting it in my body tag. Any idea how to set it and align it to the center? Thanks for the tutorial btw ! 🙂
That was heplful for me thanks.
bro…impressed….thanks
estas escapao muy bueno tu video!!
thanks great
Gracias por compartir el archivo hermano
First of all , this is amazing!
but i have a question , i have a website project in school , and i want to make my gallery look something like this 😉
the problem is : we only allowed to use HTML1 , will the code that you published here will work ?
thanks
wow !…Good Job 😉
Thanks very much for sharing us 🙂
Could you add the javascript code when a pause button is added? 😀
i think use image for right left button is not the best solution , it make your site slow , use css buttons code like that :
#Bouton {
background-color:#252525;
color:#ffffff;
font: bold Arial;
text-align: center;
border : 2px solid white;
border radius : 10px 10;
}
#Bouton:hover {
background-color:#505050;
color: red;
}
then put it in nav menu 😉
Awesome
How would I make my own left/right buttons?
how can i give this images pages linkes
Best tutorial video. Don't worry pal for the negative comments. You already got many likes (1 from me :P).
Nice work. A extra few lines of code and you can make it responsive. 🙂
Thanks! Much love, bro. Atm I'm in need of this kind of slideshow mechanism, I dislike JQuery, and I don't yet have a javascript skill to write it all from scratch, so this is spot on.
how long it took to learn this handcoding ?
One of the worst video tutorials I've seen! It could be "great" if you reduce the speed by like 300%!!!
Awesome Video, thankU
could you please slow down when you do a tutorial?! we all know that you're good at programming but some viewers are not. and it's really hard to follow your video in that speed
THX. This is just what I needed.
So good! Dude, how to add a simple WaterMark over the slideshow?
Question, why Vect = new Array(nrImg + 10?); Why do you need to add 10 to 3 for this data structure? Maybe I'm just missing something.
Good tutorial. For people saying it's too fast, with HTML5 players (Chrome) you can slow it down to .25 speed and follow right along. I think you can also stream it using VLC and control it in there too.
Hey, can you please answer me, how can i delete this thing in bottom, which is called SnavBottom?
thanks a lot men. its help me a lot on my project…
this might be helpful with my slow mind but I just can't understand it, and besides your so fast. But anyway thanks
More than awesome and more than helpful video … Thanks a lot.