Create image slider using Html, Css and Javscript

Hello geeky programmers, today I am going to tell you how to create image slider with the help of HTML, CSS, Javascript, and Jquery. In this tutorial, you will implement some famous Jquery libraries like hammer.js and imagesloaded.js. I will provide you the link of both.

Create Html, Css and Javscript image slider

Create image slider using Html, Css and Javscript

1. First of all, you will have to create a new folder named slider effect. You can choose any name you like.

HTML | CSS: Create a Beautiful login form with modal effect

Create New Folder

2. Create files like index.html and style.css. Here you will write the working code in it.

Files - Image Slider

3. Download any three images that you want to use in your HTML, CSS slider.

4. Open visual studio and open the folder slider effect that you have just created

Visual Studio

5. Now paste the index.html code in it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Slider Effect</title>
    <link rel="stylesheet" href="style.css" type="text/css"> 
</head>
<body>
    <div id="sequence" class="seq">
        <ul class="seq-canvas">
            <li class="step1 valign seq-in">
                <div class="vcenter">
                    <img src="Hyundai.jpg" alt="" class="feature" 
                    height="300" width="389" />
                    <h2 data-seq class="title">Hyundai</h2>
                </div>
            </li>
            <li class="step2 valign">
                <div class="vcenter">
                    <img src="jaguar.jpg" alt="" class="feature" 
                    height="300" width="325" />
                    <h2 data-seq class="title">jaguar</h2>
                </div>
            </li>
            <li class="step3">
                <div class="vcenter">
                    <img src="jaguar (2).jpg" alt="" class="feature" 
                    height="300" width="389" />
                    <h2 data-seq class="title">jaguar</h2>
                </div>
            </li>
        </ul>

        <fieldset class="nav" aria-label="Slider buttons" 
        aria-controls="sequence">
    <button type="button" class="seq-prev" aria-label="Previous">
        <img src="prev.svg" alt="Previous" /></button>
        <ul role="navigation" aria-label="Pagination" class="seq-pagination">
            <li class="seq-current">
                <a href="#step1" rel="step1" title="Go to bananas">
                    <img src="Hyundai.jpg" alt="Bananas" width="50" height="40" />
                </a>
            </li>

            <li>
                <a href="#step2" rel="step2" title="Go to Coconut">
                    <img src="jaguar.jpg" alt="Coconut" width="50" height="40" />
                </a>
            </li>

            <li>
                <a href="#step3" rel="step3" title="Go to Orange">
                    <img src="jaguar (2).jpg" alt="Orange" width="50" height="40" />
                </a>
            </li>

        </ul>
    <button type="button" class="seq-next" aria-label="Next">
        <img src="next.svg" alt="Next" />
    </button>
    </fieldset>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.min.js"></script>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/sequence.min.2.1.0.js"></script>
    <script>
        var sequenceElement = document.getElementById("sequence");

        var options = {
            keyNavigation: true,
            animateCanvas: false,
            phaseThreshold: false,
            revrseWhenNavigatingBackwards: true
        }

        var mySequence = sequence(sequenceElement, options);
        </script>
</body>
</html>

Explanation:

In this, you have successfully created navigation with the help of <nav> tag. You will also include your downloaded pictures with the <img> tag. Next, you will implement the next and previous buttons. You can download all the images and buttons from the link provided below. 

Top programming languages in the world to learn

That’s all for the HTML. Its time to decorate it with the help of CSS stylesheet. For this, you are going to create style.css file and paste the code.

6. Paste the style.css code in it.

body,
html,
.seq{
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
}

.seq{
    position: relative;
    overflow: hidden;
    font-family: sans-serif;
    color: white;
    text-align: center;
    background-color: #2A93BC;
    transition-duration: .5s;
    transition-property: background-color;
}

.seq-canvas,
.seq-canvas > * {
    height: 100%;
    width: 100%;

    margin: 0;
    padding: 0;
    list-style: none;
}

.seq-canvas > * {
    position: absolute;

    padding: 32px;
    box-sizing: border-box;

    height: auto;
    top: 0;
    bottom: 80px;
}

.seq-step1{
    background-color: #102334;
}
.seq-step2{
    background-color: #1f1f1f;
}
.seq-step3{
    background-color: #561295;
}

.feature{
    width: 70%;
    max-width: 100%;
    height: auto;
}

@media only screen and (min-width: 460px) and (min-height: 520px){
    .feature{
        width: 100%;
    }
}

.valign:before{
    content: "";
    height: 100%;
}

.valign:before,
.valign > .vcenter {
    display: inline-block;
    vertical-align: middle;
}

.valign{
    font-size: 0;
}

.valign > .vcenter{
    font-size: 16px;
}

.title{
    margin: 0;
    opacity: 0;
    transform: translateX(50px) translateZ(0);

    transition-duration: .5s;
    transition-property: opacity, transform;

}


.seq-in .title{
    opacity: 1;
    transform: translateX(0) translateZ(0);
}

.seq-out .title{
    opacity: 0;
    transform: translateX(-50px) translateZ(0);
}

.feature{
    transform: translateZ(0) scale(0);
    transition-duration: .5s;
    transition-property: transform, opacity;
}

.seq-in .feature{
    transform: translateZ(0) scale(1);
}

.seq-out .feature{
    transform: translateZ(0) scale(1);
    opacity: 0;
}

.nav{
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 2.5em;
    max-width: 640px;
    width: 100%;

    border: none;
    margin: 0 auto;
    padding: 0;
}

.seq-next,
.seq-prev{
    padding: 0;
    background: transparent;
    border: none;

    padding: .75em;
    cursor: pointer;
    color: white;
    font-size: .75em;
    text-transform: uppercase;

    opacity: .7;
    transition-duration: .25s;
    transition-property: opacity;
}

.seq-next:hover,
.seq-prev:hover{
    opacity: 1;

}

.seq-next,
.seq-prev,
.seq-pagination{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-top: 0;
}

.seq-pagination{
    margin: 0 1em;
    padding: 0;
}

.seq-pagination li{
    position: relative;

    list-style: none;

    display: inline-block;
    vertical-align: middle;

    width: 50px;
    height: 40px;
    margin: 0 .25em;
}

.seq-pagination li::before{
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    margin-top: .5em;
    border-radius: 50%;
    background: white;

    opacity: 0;
    transition-duration: .25s;
    transition-property: opacity;
}


.seq-pagination .seq-current:before{
    opacity: .7;
}

.seq-pagination img,
.seq-pagination a{
    display: block;
    border: none;
}

In this, you have successfully applied styling to your image slider with the help of the hover effect. You have also included thumbnail at the end of the slider. It will help the user to easily navigate to images in the slider.

How to add HTML5/CSS3 Transform Effects on Scroll

Conclusion

7. The next step is to apply Javascript in it. Here is the link from which you have to copy and paste the jquery link on your website. 

https://cdnjs.com/libraries/jquery.imagesloaded

https://cdnjs.com/libraries/hammer.js/

Also, below are the javascript code that you will write at the bottom of your HTML index.html file. This will help you do transition smoothly.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.min.js"></script>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/154/sequence.min.2.1.0.js"></script>
    <script>
        var sequenceElement = document.getElementById("sequence");

        var options = {
            keyNavigation: true,
            animateCanvas: false,
            phaseThreshold: false,
            revrseWhenNavigatingBackwards: true
        }

        var mySequence = sequence(sequenceElement, options);
        </script>

After the successful implementation of javascript, its time to run your code. Here is the output you will obtain.

We hope this article helped you to learn Create image slider using Html, Css and Javscript to use on your project.

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

Divyanshu

A blog scientist by the mind and a passionate blogger by heart ❤️. Creator of BeFirstly, Life motto: Do until you die ! BeFirstly helps you to make your website rank better in search engines like Google and Bing. Follow us for more 🎉

3 thoughts on “Create image slider using Html, Css and Javscript