Image Slider

Project Description:

In this project we are going to make a Responsive Image slider using HTML,CSS and Javascript.

Image slider will be responsive and attractive as possible.
Image slider will be automatic.It will slide automatically in every five second.
Image slider will have Left and Right buttons.With which user will be able to slide images.
Slider will have transition effect while sliding.

Requirements:

Must know how to handle css position and transition property.
You must know how to handle javascript functions with call-back.
You must know how to manuplate DOM elements.
You must know how to use javascript setTimeout(), setInterval() methods.
You must know the concept of global and local variables.

Challenge:

If you want to make a Image gallery with the help of description and guidelines above, you can try our Editor above.

Image slider must function as described above.
Slider must look like below in image:

Guides:

Take a div container for all the images and buttons.
place the button with css property for left one: 'position:absolute' and for right one 'position:relative'.
Javascript:
- Define a global variable i.
- Define three functions: plusindex(), autoslide() and showimage()
- Code in such a way that: when left button is clicked value of i will be decreased by one, when right button is clicked value of i will be decreased and when the value of i exceeds the number of image presence value of i will be reset to zero and sliding will restart.
- If user don't clicks the button image will automatically slide in every five second.

If you want to take a challenge don't scroll below

Source code to make image slider:

HTML

        <div class="image-container">
            <img class="slides" src="images/image1.jpg"/>
            <img class="slides" src="images/image2.jpg"/>
            <img class="slides" src="images/image3.jpg"/>
            <img class="slides" src="images/image4.jpg"/>
            <button class="btn" id="btn1" onclick="plusindex(-1)">❮</button>
            <button class="btn" id="btn2" onclick="plusindex(1)">❯</button>
            
            </div>

CSS

        .image-container {
            width:70%;
            height:70vh;
            border:2px solid black;
            margin:0 auto;
            position:relative;
            
            }
            .image-container img
            {
            width:100%;
            height:100%;
            position:absolute;
            object-fit: cover;
            transition:all 1s linear 0s;
            
            }
            .btn
            {
                position:absolute;
                width:50px;
                height:50px;
                border:none;
                border-radius:25px;
                top:40%;
                color:white;
                background:black;
            }
            .btn:hover
            {
            background:white;
            color:black;
            }
            #btn2
            {
            position:relative;
            float:right;
            }

        var index=1;
        function plusindex(n)
        {
        
            index=index+n;
            showimage(index);
        }
        showimage(1);
        function showimage(n)
        {
        var i;
        var x=document.getElementsByClassName("slides");
        if(n>x.length){index=1};
        if(n<1){index=x.length};
        for(i=0;i<x.length;i++)
        {
        x[i].style.display="none";
        
        }
        x[index-1].style.display="block";
        }
        
        autoslide();
        function autoslide()
        {
        
            var i;
            var x=document.getElementsByClassName("slides");
        for(i=0;i<x.length;i++)
        {
        x[i].style.display="none";
        }
        if(index>x.length){index=1}
        x[index-1].style.display="block";
        index++;
        setTimeout(autoslide,5000);
        }

PREVIEW:

Challenge-2:

Bring transition effect on changing the image.

note: to make slide in effect using transition on changing the image we must translate image to left or right just before sliding.