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 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

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

Chapter 1- The Flaw In The Plan

"I've had enough trouble for a lifetime" - Harry Potter. (Not touching that) 30 YEARS LATER Jacob’s stationery shop was not built to hold this many people. The space was narrow, almost claustrophobic, with shelves pressed tightly against each wall and books stacked far beyond what seemed structurally safe. Old parchment, fresh ink, and dust hung in the air, forming a scent that clung to everything. Towers of second-hand books leaned dangerously, as though the entire place might collapse if someone reached too carelessly. No one seemed concerned. Students crowded every inch—arguing over titles, stretching across one another, competing with a quiet desperation that came from knowing there wouldn’t be enough for everyone. It wasn’t chaos exactly. It was controlled scarcity. And at the center of it all was Jacob. He moved through the shop with practiced ease, slipping between bodies without touching them, pulling books from impossible stacks, catching falling piles before the...
Post a Comment
Read more