index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/gif/png" href="my.jpg">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Image-gallery</title>
</head>
<body>
    <div class="gallery-wrap">
        <img src="images/back.png" id="backBtn">
        <div class="gallery">
            <div>
              <span><img src="images/image-1.jpg"></span>
              <span><img src="images/image-3.jpg"></span>
              <span><img src="images/image-2.jpg"></span>
            </div>
            <div>
              <span><img src="images/image-4.jpeg"></span>
              <span><img src="images/image-5.jpg"></span>
              <span><img src="images/image-6.jpg"></span>
            </div>
         </div> 
        <img src="images/next.png" id="nextBtn">
    </div>

    <script>

        let scrollContainer = document.querySelector(".gallery");
        let backBtn = document.getElementById("backBtn");
        let nextBtn = document.getElementById("nextBtn");

        scrollContainer.addEventListener("wheel", (evt) => {
            evt.preventDefault();
            scrollContainer.scrollLeft += evt.deltaY;
            scrollContainer.style.scrollBehavior = "auto";
        });

       nextBtn.addEventListener("click", ()=>{
            scrollContainer.style.scrollBehavior = "smooth";
            scrollContainer.scrollLeft += 900;
        });

        backBtn.addEventListener("click", ()=>{
            scrollContainer.style.scrollBehavior = "smooth";
            scrollContainer.scrollLeft -= 900;
        });

    </script>
</body>
</html>