Click here to Skip to main content
15,441,434 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I made this set of div slides with left and right navigation arrows. Each div slide is set to a min-width of 80px.

The code works just fine, except, when I navigate either to the right or to the left, the slider stops at the last item.

I want this slider to loop, instead of ending at the last item.

What I have tried:

Here's the full HTML:

HTML
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <style>
        body{
            background-color: #555;
            height: 100vh;
            display: grid;
            align-items: center;
            justify-items: center;
            font-family: 'Helvetica';
        }
        
        div#slide_wrapper{
            width: 440px;
            display: flex;
            justify-content: space-between;
            height: fit-content;
        }
        
        div#slider{
            width: 350px;
            display: flex;
            height: fit-content;
            flex-wrap: nowrap;
            overflow: hidden;
        }
        
        div.thumbnail{
            min-width: 80px;
            min-height: 80px;
            cursor: pointer;
            display: grid;
            place-items: center;
            font-size: 30px;
        }

        div.thumbnail:not(:last-child){
            margin-right: 10px;
        }

        div.thumbnail:nth-child(1){
            background-color: darkturquoise;
        }
        div.thumbnail:nth-child(2){
            background-color: goldenrod;
        }
        div.thumbnail:nth-child(3){
            background-color: rebeccapurple;
        }
        div.thumbnail:nth-child(4){
            background-color: powderblue;
        }
        div.thumbnail:nth-child(5){
            background-color: firebrick;
        }
        div.thumbnail:nth-child(6){
            background-color: sienna;
        }
        div.thumbnail:nth-child(7){
            background-color: bisque;
        }
        div.thumbnail:nth-child(8){
            background-color: navy;
        }
        
        div#slide_wrapper > button{
            height: fit-content;
            align-self: center;
            font-size: 24px;
            font-weight: 800;
            border: none;
            outline: none;
        }
        
        div#slide_wrapper > button:hover{
            cursor: pointer;
            background-color: dodgerblue;
            color: #fff;
        }
    </style>
    <title>Product Image Slider</title>
</head>

<body>
    <div id="slide_wrapper">
        <button id="slide_left" class="slide_arrow"></button>
        <div id="slider">
            <div class="thumbnail active">1</div>
            <div class="thumbnail">2</div>
            <div class="thumbnail">3</div>
            <div class="thumbnail">4</div>
            <div class="thumbnail">5</div>
            <div class="thumbnail">6</div>
            <div class="thumbnail">7</div>
            <div class="thumbnail">8</div>
        </div>
        <button id="slide_right" class="slide_arrow"></button>
    </div>
</body>

</html>

<script>

    let buttonLeft = document.getElementById('slide_left')
    let buttonRight = document.getElementById('slide_right')

    buttonLeft.addEventListener('click', function() {
        document.getElementById('slider').scrollLeft -= 90
    })

    buttonRight.addEventListener('click', function() {
        document.getElementById('slider').scrollLeft += 90
    })
</script>
Posted
Comments
Richard MacCutchan 13-Jun-22 3:48am    
You need to add a check in your event handlers to see if the left or right move will go outside the limits of the window. Create variables to hold the current position of the slider and whenever it exceeds its limit, reset it to the initial position.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900