Skip to main content

SLIDER USING HTML, CSS, and Javascript

WATCH THE YOUTUBE PREVIEW:




MOVING SLIDER:

The moving slider contains two divs. The first div displays the full image and the second one has the selection tabs. On clicking them our display image moves to the specified image. 

HTML:

    <div id="main">
        <div id="show">
            <img src="a1.jpg">
            <img src="a2.jpg">
            <img src="a3.jpg">
            <img src="a4.jpg">
        </div>
        <div id="select">
            <div class="item">
                <a href="#" onclick="allot(1);">
                    <img src="a1.jpg" alt="">
                </a>
            </div>
            <div class="item">
                <a href="#" onclick="allot(2);">
                    <img src="a2.jpg" alt="">
                </a>
            </div>
            <div class="item">
                <a href="#" onclick="allot(3);">
                    <img src="a3.jpg" alt="">
                </a>
            </div>
            <div class="item">
                <a href="#"onclick="allot(4);">
                    <img src="a4.jpg" alt="" >
                </a>
            </div>
            
        </div>
    </div>


CSS:

        body{
            background-image: linear-gradient(to right,red,orange);
        }
        img{
            width: 100%;
        }
        #main{
            width: 30%;
            overflow: hidden;
            position: absolute;
            left: 480px;
            top: 73px;
            border: solid red;
            box-shadow: 10px 5px 10px 4px black;
        }
        #show{
            width: 100%;
            display: flex;
            transition: 0.5s all ease-in-out;
            height: 60vh;
        }
        #select{
            display: flex;
        }
        .item{
            margin: 0.3rem;
            margin-right: 0rem;
        }
        .item:hover{
            border: solid white;
        
        }


JAVASCRIPT:

        var imid = 1;
        const wid = document.querySelector("#show img:first-child").clientWidth;
        var i;
        function allot (i){
            imid = i;
            slide();
        }
        function slide(){
            const wid = document.querySelector("#show img:first-child").clientWidth;
            var dis = -(imid-1)*wid;
            document.querySelector("#show").style.transform = `translateX(${dis}px)`;
        }

The display image div contains two divs with the same dimensions and which fixes them. When we click on the image in select div a particular position number is allocated to them using allot function and further this accounts for the slide function which translates the display div to opposite direction of the product of position number and width of first image in display. 


Comments

Post a Comment

Popular posts from this blog

Aesthetic Login & Sign-up page | HTML, CSS, & Javascript

Take a tour of our final login and sign-up page. HTML CODE: We create three divs- the first one to select from the option of either login or sign-up containing two buttons, the second one with a form for sign-up, and the third one for login. To all the buttons on the page, we provide a single class and for both the forms, a single class is given. CODE:     <div id="options">         <button class="but" style="margin-top: 20px;" onclick="appear();">Login</button>         <button class="but" onclick="sinapp();">Sign-Up</button>         <p>Use G-mail or Facebook account</p>     </div>     <div id="sign" class="formin">         <form id="sin-cont">             <input type="text" name="fn" placeholder="Enter Your First Name" required>             <input typ...
Post a Comment
Read more

Chapter 10- The Flaw In Their Plan

Edward slowly stepped out from behind the tree, revealing himself to Peter. He had Professor Flamel pinned by the throat, his wand pressed inches from the old man’s face. “Peter… you don’t understand,” Edward said, advancing. “This is necessary. I have to do this.” Peter backed away, wand raised, heart hammering. “I trusted you,” he choked out. “I thought so highly of you, Professor. How did you even get back into Hogwarts? Who helped you? Tell me!” Edward’s grip on Flamel tightened. “I will tell you everything, Peter. I promise. But let me finish this. I must kill him. Fifteen years I’ve waited—fifteen years for this moment!” “Expelliarmus!” Peter shouted, sending a jet of red light through the air—but Edward snapped his wand and blocked it with ease. “Sectumsempra!” Edward roared. The curse flew at Peter like a black blade. His reflexes kicked in; he dove sideways, but not fast enough. His right cheek tore open, his arm split with a deep gash, and he crashed onto the ground, screamin...
Post a Comment
Read more

HOW TO BE LESS BORING AND BE MORE INTERESTING

We all are born amazing. Nobody in this world is ever boring. But sometimes, due to certain situations and lack of proper communication skills we are not able to convey ourselves, which makes us damn boring. So, here we'll be going over a few tips to be more interesting in participation. Now, it doesn't guarantee that those people who already find you boring would have a changed perspective on you. Because your first impression is the biggest game, and you had already played it on them. 1. BE A GOOD LISTENER:-  Now, trust it or not, people in this world, all of them will claim to be good listeners and tell that they get bored of people who talk much, but in reality, all of them love to talk. Everyone is interested in talking about themselves. Listening, lol, nobody likes that. Now if you let them talk about themselves and react to their things naturally they would find interest in you. Take examples in your life too. Suppose you are interested in telling your friend a long stor...
Post a Comment
Read more