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

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

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 5- Bronze Snitch

Fictus Nativitas Peter found the spell in the diary. He murmured the description and usage of the spell slowly, making sure no one in the library could hear him. “Think of the object you wish to mimic—think closely—and then repeat clearly and precisely: Fictus Nativitas.” Peter knew exactly what he needed to mimic, what he needed to create. He practiced the spell under his breath all the way back to the dormitory. Later, sitting upright on his bed after his roommates had fallen asleep, Peter took out the diary once more. He reread the instructions, closed his eyes, and envisioned the wonderful moment he longed for: tomorrow’s match, the Golden Snitch clutched in his hand, his face glowing with triumph as the crowd roared. Peter could almost feel the victory. Slowly, he opened his eyes and raised his wand.  “Fictus Nativitas,” he whispered.                                ...
Post a Comment
Read more