D4mations.com

Slideshow tutorial – JavaScript



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

d4mer

, , , , , , , , , , , , , , , , , ,

40 responses to “Slideshow tutorial – JavaScript”

  4. 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.

  8. 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.

  10. 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?

  13. 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 ! 🙂

  19. 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

  22. 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 😉

  36. 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.

Leave a Reply