'Scrolling the images left and right with the mouse

I made a Netflix clone site, I want to put mouse scrolling or right and left arrows to scroll the movie posters left and right, how can I do this?. Currently, the banners scroll only with the middle mouse button and it is very difficult. I would appreciate if you could help me with this. I am new to software.

My site:

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Benim Listem</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <!-- Banner -->
    <div class="banner" id="banner">
        <video id="video" class="banner" poster="images/videoframe.jpg" style="pointer-events:none;">
            <source src="images/bridgerton.mp4" type="video/mp4" />
        </video>
            <div class="banner__contents">
                <h1 class="banner__title">Bridgerton</h1>
                <div class="banner__buttons">
                    <button class ="banner__button" id="btnPlayPause" accesskey="p" onclick="playPauseVideo()">Play</button>
                    <button class ="banner__button">My list</button>
                </div>
                <div class="banner__desc">
                    Büyük şehirden gelen bir diş hekimi, küçük bir sahil kasabasında muayenehane açar. Burada her bakımdan onun tam zıddı olan becerikli ve yakışıklı bir adamla tanışır.
                </div>
            
            </div>
    </div>

    
<!-- Netflix Orginals -->
<div class="row first">
    <h2>En sevdiğim Film ve Diziler</h2>
    <div class="row_posters">
        <img src="images/1.jpg" alt="" class="row_poster row_posterLarge"/>
        <img src="images/2.jpg" alt="" class="row_poster row_posterLarge"/>
        <img src="images/3.jpg" alt="" class="row_poster row_posterLarge"/>
        <img src="images/4.jpg" alt="" class="row_poster row_posterLarge"/>
        <img src="images/5.jpg" alt="" class="row_poster row_posterLarge"/>
        <img src="images/6.jpg" alt="" class="row_poster row_posterLarge"/>
        <img src="images/7.jpg" alt="" class="row_poster row_posterLarge"/>
        <img src="images/8.jpg" alt="" class="row_poster row_posterLarge"/>
        <img src="images/9.jpg" alt="" class="row_poster row_posterLarge"/>
        <img src="images/10.jpg" alt="" class="row_poster row_posterLarge"/>
        <img src="images/11.jpg" alt="" class="row_poster row_posterLarge"/>
        <img src="images/12.jpg" alt="" class="row_poster row_posterLarge"/>
        
    </div>
</div>

<!-- Trending Now --> 
<div class="row">
    <h2>Trending Now</h2>
    <div class="row_posters">
        <img src="images/93.jpg" alt="" class="row_poster"/>
        <img src="images/94.jpg" alt="" class="row_poster"/>
        <img src="images/95.jpg" alt="" class="row_poster"/>
        <img src="images/96.jpg" alt="" class="row_poster"/>
        <img src="images/97.jpg" alt="" class="row_poster"/>
        <img src="images/98.jpg" alt="" class="row_poster"/>
        <img src="images/99.jpg" alt="" class="row_poster"/>
        <img src="images/100.jpg" alt="" class="row_poster"/>
        <img src="images/93.jpg" alt="" class="row_poster"/>
        <img src="images/94.jpg" alt="" class="row_poster"/>
        <img src="images/95.jpg" alt="" class="row_poster"/>
        <img src="images/96.jpg" alt="" class="row_poster"/>
        <img src="images/97.jpg" alt="" class="row_poster"/>
        <img src="images/98.jpg" alt="" class="row_poster"/>
        <img src="images/99.jpg" alt="" class="row_poster"/>
        <img src="images/100.jpg" alt="" class="row_poster"/>
    </div>
</div>

<script>
    player = document.getElementById('video');
    btnPlayPause= document.getElementById('btnPlayPause');

    player.addEventListener('play', function(){
        changeButtonType(btnPlayPause, 'Pause');
    }, false)

    player.addEventListener('pause', function(){
        changeButtonType(btnPlayPause, 'Play');
    }, false);

    function playPauseVideo(){
        if (player.paused || player.ended) {
            changeButtonType(btnPlayPause, 'Pause');
            player.play();
        } else {
            changeButtonType(btnPlayPause, 'Play');
            player.pase();


        }
    }

    function changeButtonType(btn,value){
        btn.title = value;
        btn.innerHTM = value;
    }
</script>

</body>




</html>

CSS Code:

*{
    margin: 0;
    box-sizing: border-box; 
}

body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: #111;
}    

.row_poster{

    width: 100%;
    object-fit: contain;
    max-height: 100px;
    margin-right: 10px;
    transition: transform 450ms;
}



.row_posters{
    display: flex;
    overflow-y: hidden;
    overflow-x: scroll;
    padding: 20px;
}



.row_poster:hover{
    transform:scale(1.00);
}

.row_posters::-webkit-scrollbar{
    display: none;

}



.row_posterLarge {
    max-height: 250px;
}
.row_posterLarge:hover{
    transform: scale(1.09);
}

.row{
    color: white;
    margin-left: 20px;
}


.first{
    margin-top: 3%;
}


.banner{
    position: relative;
    color:white;
    object-fit: cover;
    height: 550px;
    width: 100%;
    
    
    

}

#banner:after {
    content: '';
    position: absolute;
    left:0;
    bottom:0;
    width: 100%;
    height: 100px;
    background-image: linear-gradient(to top, #111, transparent);
}

.banner__contents{
    position: relative;
    margin-left: 30px;
    height: 190px;
    margin-top: -15%;
}

.banner__title{
    font-size: 3rem;
    font-weight: 900;
    padding-bottom: 0.3rem;
}

.banner__desc{
    width: 45rem;
    line-height: 1.3;
    padding-top: 1rem;
    font-size: 0.8rem;
    max-width: 360px;
    height: 180px;
}

.banner__button{
    cursor: pointer;
    color: white;
    outline: none;
    border: none;
    font-weight: 800;
    border-radius: 0.2vw;
    padding-left: 2rem;
    padding-right: 2rem;
    margin-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: rgba(51, 51, 51,0.5 );


}

.banner__button:hover{
    color: #000;
    background-color: #e6e6e6;
    transition: all 0.2s;
}
htmlcsswinbugs


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions