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 SIX: THE FLAMES

MAYOR'S OFFICE  Gryffin Scout smoked heavily looking out of the window at the moon. "What are my orders sir," said a cop in the room, "I want to meet JJ Warren, as quick as possible, things are getting insane, I can't take further risks, let's see what he has to offer me, contact him tomorrow morning," said Scout.  THE WAREHOUSE From the window at the roof of the warehouse, a can of fuel fell to the floor, after which a matchstick fell, raising flames in the entire space. Warren looked at the rising flames anxiously when he ran to a corner saving himself from the rising flames approaching him. "Why are you doing this?" Warren shouted in a rage, "I will kill you JJ Warren, I promise you, this will be your end, and I am honored to kill such a worthy opponent tonight!" said the echo. "Leave my friends alone, they are innocent, don't hurt them!" shouted Warren, "They will die before you, I assure you of that, and this w...
Post a Comment
Read more

A Study In Scarlet: Summary

  PART 1- The first part of the story focuses on an introduction to the characters- Sherlock Holmes, Dr. Watson, Detective Lestrade, and Gregson, and we get an overview of the case. Dr. Watson, who has been recently retired from his services in the army, travels to London in search of an apartment. Soon he gets introduced to Sherlock Holmes, a man with uncommon levels of intellect and intelligence. Watson and Holmes move into 221B Baker Street, wherein Watson learns that Sherlock is a consulting detective, and gives a lead to private and government detectives such as Lestrade and Gregson. Sherlock also deducts that Watson had been deployed in Afghanistan earlier, after looking at his sunburned skin and his soldier-like etiquette. Holmes soon receives a letter from Gregson demanding his help on a murder case. A night earlier, on Baxton Street, a cop was strolling after heavy rain when he witnessed an enlightened house that had been abandoned for a while. On entering the house the co...
Post a Comment
Read more