MASIGNASUKA101
3757417361466409779

Full Screen Image Slider Using HTML, CSS & JavaScript

Full Screen Image Slider Using HTML, CSS & JavaScript
Add Comments
Monday, January 11, 2021
Full Screen Image Slider Using HTML, CSS & JavaScript

The image slider is an important lesson of the website. In this article, I am going to show you how you can easily create a full-screen image slider using just plain HTML, CSS, and JavaScript programming code. Using the image slider you can organize a large number of images in one place. This type of slider is used as a sideshow on various websites. This is a full-screen image slider, in which case the images can be viewed across the entire display. Here are the Preview and Next buttons for changing the image. You can easily move the image back and forth. 

HTML programming code has been used to construct the slider, that is, to add text and necessary links. CSS code has helped to design it completely and add images. Basically, 6 pictures have been used here. However, you can easily change these pictures. JavaScript programming code has been used to change the images, that is, to implement the Next and Preview buttons on this slider. This slider has some more important features. For example, when you open a picture, the number of that picture can be seen below. This will help you understand how many numbers you have opened the image. 

You can use the download button below to download the source code needed to create it. If you want to know step by step and complete information, you can follow the video tutorial below.

Below I have shown which programming code has been used to create an element. You can easily create this image slider by following the four steps below.

Step 1: Create the structure of the slider using HTML code

First, you add the necessary links and text using the HTML code. Here are some of the levels used to show image numbers. The following programming codes have been used to create them.

  <div class="wrap">
        <div id="arrow-left" class="arrow"></div>
        <div id="slider">
            <!-- 1st image-->
            <div class="slide slide1">
                <div class="slide-content">
                    <span>Image One</span>
                </div>
            </div>
            <!-- 2nd image-->
            <div class="slide slide2">
                <div class="slide-content">
                    <span>Image Two</span>
                </div>
            </div>
            <!-- 3rd image-->
            <div class="slide slide3">
                <div class="slide-content">
                    <span>Image Three</span>
                </div>
            </div>
            <!-- 4th image-->
            <div class="slide slide4">
                <div class="slide-content">
                    <span>Image Four</span>
                </div>
            </div>
            <!-- 5th image-->
            <div class="slide slide5">
                <div class="slide-content">
                    <span>Image Five</span>
                </div>
            </div>
            <!--6th image-->
            <div class="slide slide6">
                <div class="slide-content">
                    <span>Image Six</span>
                </div>
            </div>
        </div>
        <div id="arrow-right" class="arrow"></div>
    </div>

Step 2: Design the background and add the images 

The following codes are CSS programming codes. With the help of which the pictures in this slide have been added and the background has been designed. The following code has been used to add the images used here.

/* now add Css Code*/
body,
#slider,
.wrap,
.slide-content{
    margin0;
    padding0;
    font-familyArialHelveticasans-serif;
    height100vh;
    width100%;
    overflow-xhidden;
}
.wrap{
    positionrelative;
}
.slide{
    background-sizecover;
    background-position:center;
    background-repeatno-repeat;
}
/* image 1 */
.slide1{
    background-imageurl("image1.jpg");
}
/* 2nd image */
.slide2{
    background-imageurl("image2.jpg");
}
/* 3rd image*/
.slide3{
    background-imageurl("image3.jpg");
}
/* 4th image*/
.slide4{
    background-imageurl("image4.jpg");
}
/* 5th image*/
.slide5{
    background-imageurl("image5.jpg");
}
/* 6th image*/
.slide6{
    background-imageurl("image6.jpg");
}

Step 3: Create Next and Preview buttons

The next and previous buttons in this slider have been designed with your own programming code.

.slide-content{
    displayflex;
    flex-directioncolumn;
    justify-contentcenter;
    align-itemscenter;
    text-aligncenter;
}
.slide-content span{
    font-size5rem;
    color#fff;
}
/*border: 1px solid #8ce436;box-shadow: 0 0 5px #8ce436 inset;opacity: 0;transition: all 0.3s ease;*/
.arrow{
    cursorpointer;
    positionabsolute;
    top50%;
    margin-top-35px;
    width0;
    height0;
    border-stylesolid;
}
#arrow-left{
    border-width30px 40px 30px 0;
    border-colortransparent #fff transparent transparent;
    left0;
    margin-left30px;
}
#arrow-right{
    border-width30px 0 30px 40px;
    border-colortransparent transparent transparent #fff;
    right0;
    margin-right30px;
}

Step 4: Add JavaScript code to change the images in the slider 

Own code is the JavaScript code that plays the most important role in the slider. Here the code plays the biggest role in changing the images and sorting the images sequentially. JavaScript has a role to play in implementing the two buttons on this slider.

let sliderImages = document.querySelectorAll(".slide"),
     arrowLeft = document.querySelector("#arrow-left"),
     arrowRight = document.querySelector("#arrow-right"),
     current = 0;
   
   // Clear all images
   function reset() {
     for (let i = 0; i < sliderImages.length; i++) {
       sliderImages[i].style.display = "none";
     }
   }
   
   // Init slider
   function startSlide() {
     reset();
     sliderImages[0].style.display = "block";
   }
       /*border: 1px solid #8ce436;box-shadow: 0 0 5px #8ce436 inset;opacity: 0;transition: all 0.3s ease;*/                                                                                          /*sliderImages[i].style.display = "none";*/
   // Show prev
   function slideLeft() {
     reset();
     sliderImages[current - 1].style.display = "block";
     current--;
   }
   
   // Show next
   function slideRight() {
     reset();
     sliderImages[current + 1].style.display = "block";
     current++;
   }
                                                                                         /*arrowLeft = document.querySelector("#arrow-left"),
                                                                                         arrowRight = document.querySelector("#arrow-right"),*/
   // Left arrow click
   arrowLeft.addEventListener("click"function() {
     if (current === 0) {
       current = sliderImages.length;
     }
     slideLeft();
   });
   
   // Right arrow click
   arrowRight.addEventListener("click"function() {
     if (current === sliderImages.length - 1) {
       current = -1;
     }
     slideRight();
   });
   
   startSlide();
   

 I hope you have learned how to make a fullscreen image slider from this article. If you have any problems trying to make it, you can definitely ask me in the comments.



Thank you, Please Visit again