How to change the width of horizontal scrollbar track?

Question

I am trying to make an image slider with a scrollbar in the bottom. The images should be shown in fullscreen with the the active image in the center and an image in the left side and right side of the active image as shown in the image.

The scrollbar should not be sticking to the slider. I tried to implement it in the following way. But couldn't fix it.

Updated with the help from @kip . I need to remove a class for the active image that will be shown in the center and add a class to all other images. 'class name : img-slider-other'

<style>
    .slider {
        width: 100%;
        text-align: center;
        overflow: hidden;
        display: flex;
        justify-content: center;
    }
    
    .slides {
        display: flex;
        overflow-x: scroll;
        margin-bottom: 50px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    
    .slides::-webkit-scrollbar {
        width: 10px;
        height: 20px;
    }
    
    .slides::-webkit-scrollbar-thumb {
        background-color: #737373;
        border-radius: 10px;
    }
    
    .slides::-webkit-scrollbar-track {
        background: transparent;
        border: 1px solid #ccc;
        max-width: 60% !important;
        margin-left: 30.75rem;
        margin-right: 30.75rem;
    }
    
    .slides::-webkit-scrollbar-track-piece {
        max-width: 200px;
        background-color: #fff;
        height: 200px;
        border: 1px solid #ccc;
        /* border-radius: 10px; */
    }
    /* .slides::-webkit-scrollbar-corner {
        border-radius: 10px;
    } */
    
    .slides>div {
        scroll-snap-align: center;
        flex-shrink: 0;
        /* width: 100%;
        max-width: 100%; */
        width: 60%;
        max-width: 60%;
        /* height: auto;  */
        height: 500px;
        /* For Temp */
        margin-right: 50px;
        margin-bottom: 50px;
        border-radius: 10px;
        /* background: #eee; */
        transform-origin: center center;
        transform: scale(1);
        transition: transform 0.5s;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 100px;
    }
    
    img {
        /* object-fit: cover; */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    body {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .img-slider-other {
        height: 80%;
        top: auto;
        opacity: 0.5;
    }
</style>

    <div class="slider">
    <div class="slides" id="slides">
        <div id="slide-1">
            <img src="c1.png" />
        </div>
        <div id="slide-2">
            <img src="c2.png" />
        </div>
        <div id="slide-3">
            <img src="c3.png" />
        </div>
        <div id="slide-4">
            <img src="c4.png" />
        </div>
        <div id="slide-5">
            <img src="c5.png" />
        </div>
    </div>
</div>


<script>
    $(document).ready(function() {
        var IDs = [];
        var selctedImg = 'slide-3';
        $(".slides").find("div").each(function() {
            IDs.push(this.id);
        });
        document.getElementById(selctedImg).scrollIntoView({
                behavior: "smooth",
                block: "end",
                inline: "nearest",
                callback: scrollEvent()
            }
        );

        function scrollEvent() {
            IDs.forEach(element => {
                console.log("el", element)
                if (selctedImg !== element) {
                    $('#' + element).children('img').addClass('img-slider-other');
                }
            });
        }
    });
</script>

Please do not edit your question as you get more help. This makes it harder for other people to follow — Lee Taylor, Apr 17 '22 at 22:27

Kip · Accepted Answer · 2022-04-15T10:50:19.350

Something like this?

.slider {
            width: 100%;
            text-align: center;
            overflow: hidden;
        }
        
        .slides {
            display: flex;
            overflow-x: auto;
            margin-bottom:50px;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
        }
        
        .slides::-webkit-scrollbar {
            width: 10px;
            height: 20px;
        }
        
        .slides::-webkit-scrollbar-thumb {
            background: black;
            border-radius: 10px;
        }
        
        .slides::-webkit-scrollbar-track {
            background: transparent;
            border: 1px solid #ccc;
            max-width: 60% !important;
            margin-left:25vw;
            margin-right:25vw;
        }
        
        .slides::-webkit-scrollbar-track-piece {
            max-width: 200px;
            background-color: #337ab7;
            height: 200px;
        }
        
        .slides>div {
            scroll-snap-align: start;
            flex-shrink: 0;
            width:70%;
            max-width: 70%;
            /* height: auto;  */
            height: 500px;
            /* For Temp */
            margin-right: 50px;
            margin-bottom:50px;
            border-radius: 10px;
            background: #eee;
            transform-origin: center center;
            transform: scale(1);
            transition: transform 0.5s;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 100px;
        }
        
        img {
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
        <div class="slides">
            <div id="slide-1">
                1
            </div>
            <div id="slide-2">
                2
            </div>
            <div id="slide-3">
                3
            </div>
            <div id="slide-4">
                4
            </div>
            <div id="slide-5">
                5
            </div>
        </div>
    </div>

Thanks for the answer. But your solution comes like this https://ibb.co/CMcfMJB. and I need the image slider to look like the image I had shared in the question and the scrollbar track should not be full width. need to reduce it to 50% of the whole page. — Raru, Apr 14 '22 at 20:18
In your first post it says `The images should be shown in fullscreen` so it wasn't clear you wanted to make the elements smaller. Have edited the code above again to make them 70%. Cheers! — Kip, Apr 15 '22 at 10:51
Sorry, it was my mistake. I was trying to tell that the parent div of the images should be fullwidth. Thanks a lot for the help. Can you please tell me any way to add class to those images with are not selected by using js's 'scrollIntoView' ? Or else adding a class in the active image by the same way? — Raru, Apr 17 '22 at 20:14

How to change the width of horizontal scrollbar track?

1 Answers1