IMAGE GALLERY USING HTML CSS JSS

                                        IMAGE GALLERY USING HTML CSS JSS




                                                        HTML SOURCE FILE

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Image gallery</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="gallery-wrap">

        <img src="images/back.png" id="backBtn">

        <div class="gallery">

            <div>

                <span><img src="images/image-1.png"></span>

                <span><img src="images/image-2.png"></span>

                <span><img src="images/image-3.png"></span>

            </div>

            <div>

                <span><img src="images/images (1).jpeg"></span>

                <span><img src="images/from-his-full-name-to-his-idol-all-you-need-to-know-about-kl-rahul-2.jpg"></span>

                <span><img src="images/images.jpeg"></span>

                <span><img src="images/image-6.png"></span>

                <span><img src="images/image-5.png"></span>

                <span><img src="images/image-4.png"></span>

            </div>

        </div>

        <img src="images/next.png" id="backBtn">

    </div>

    <script>

        let scrolContainer=document.querySelector(".gallery");

        let backBtn =document.getElementById("backBtn");

        let nextBtn =document.getElementById("nextBtn");


        scrolContainer.addEventListener("wheel",(evt)=>{

            evt.preventDefault();

            scrolContainer.scrollLeft +=evt.deltaY;

            scrolContainer.style.scrollBehaviour="smooth";

        })

        nextBtn.addEventListener("click",()=>{

            scrolContainer.style.scrollBehaviour="smooth";

            scrolContainer.scrollLeft +=900;

        })

        

        backBtn.addEventListener("click",()=>{

            scrolContainer.style.scrollBehaviour="smooth";

            scrolContainer.scrollLeft +=900;

        })

    </script>

</body>

</html> 

                                                        CSS SOURCE FILE


*{
    margin: 0;
    padding: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    box-sizing: border-box;
}
body{
    background: #191919;
}
.gallery{
    width: 900px;
    display: flex;
    overflow-x: scroll;
}
.gallery div{
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 20px;
    padding: 10px;
    flex: none;
}
.gallery div img{
    width: 100%;
    filter: grayscale(100%);
    transition: transform 0.5;
}
.gallery::-webkit-scrollbar{
    display: none;
}
.gallery-wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10% auto;
}
#backBtn, #nextBtn{
    width: 50px;
    cursor: pointer;
    margin: 40px;
}
.gallery div img:hover{
    filter: grayscale(0);
    cursor: pointer;
    transform: scale(1.1);
}


Comments

Post a Comment

Popular posts from this blog

ADD TWO NO. IN JAVA USING APPLET

Image
                                                 ADD TWO NO. IN JAVA USING APPLET Enter the first no.  10 Enter The Second no. 20 click Add  30 ----------------------------------------------------------------------------------------------------------------------------                                                                                     PREVIEW ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Copy to Code an implement  this program  import javax.swing.*; import java.awt.*; impor...
Read more

JARVIS AI

                                                            AI TOOL AI tool  first greet Good morning, Good evening, Good Night Jarvis ai tool ask any thing ex.  virat kohli in wikipedia hear answer you speak play music.   hear music AI tool  first greet Good morning, Good evening, Good Night import speech_recognition as sr import pyttsx3 import datetime import webbrowser import os import smtplib import requests import json import random def speak(text):     engine = pyttsx3.init()     engine.say(text)     engine.runAndWait() def listen():     r = sr.Recognizer()     with sr.Microphone() as source:         print("Listening...")         r.pause_threshold = 1         audio = r.listen(source)     try...
Read more

TO-DO LIST USING HTML CSS JS

Image
                                                             TO-DO LIST USING HTML CSS JS  THIS IS THE TO-DO LIST  USE CODE ANF PERFORM YOUR COMPUTER  HTML  SOURCE CODE <!DOCTYPE html> <html>     <head>         <meta name="viewport" content="width=device-width,initial-scale=1">         <title>To do list</title>         <link rel="stylesheet" href="style.css">     </head>     <body>         <div class="container">             <div class="todo-app">                 <h2>To Do List <img src="Image/icon.png"></h2>     ...
Read more