How do I customize the scrollbar in a Swiper JS slider?

Question

I'm trying to create a slider with a scrollbar similar to something like this:

Has a sort of toggle (the red circle) that, much like the progress bar on youtube or any online video, can be dragged to progress further along the slider. I've found tutorials on how to change the width of the default scrollbar, or how to customize scrollbars on a page itself, but nothing so far for a JS slider. Any assistance would be greatly appreciated.

HTML

<!--Slider Main Container-->
<div class="swiper">
    <!--Wrapper (Required)-->
    <div class="swiper-wrapper">
        <!--Slides-->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
    </div>

    <!--Pagination-->
    <div class="swiper-pagination"></div>

    <!--Navigation Buttons-->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!--Scrollbar-->
    <div class="swiper-scrollbar"></div>
</div>

JavaScript

<script>
    const swiper = new Swiper('.swiper', {
        // Optional Parameters
        direction: 'horizontal',

        // Keyboard Controls
        keyboard: {
            enabled: true,
        },
        centeredSlides: true,

        // Navigation Arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            hideOnClick: true,
        },

        // Scrollbar
        scrollbar: {
            el: '.swiper-scrollbar',
            // Makes the Scrollbar Draggable
            draggable: true,
            // Snaps slider position to slides when you release Scrollbar
            snapOnRelease: true,
            // Size (Length) of Scrollbar Draggable Element in px
            dragSize: 'auto',
        },
    });
</script>

CSS

.swiper {
    width: 1260px;
    height: 880px;
    margin-left: 350px;
    margin-right: 350px;
}

This is not a Q - but more freelancer mission (To get this desire design). In general it is not so easy to solve the idea with the `circle` related to the core CSS (The scrollbar combine ovefrlow: hidden - and the circle should be "outside" of the scrollbar). The page count could be solve by the API (Get total slides, Get current slide) - related: https://stackoverflow.com/questions/32196177/showing-number-of-slides-on-the-web-page — Ezra Siton, Aug 25 '22 at 08:59

score 0 · Answer 1 · answered Aug 25 '22 at 11:20

Add this styles to make scrollbar circle

.swiper-scrollbar.swiper-scrollbar-horizontal{bottom: 0; height: 40px;}
.swiper-scrollbar-drag{background: none;}
.swiper-scrollbar-drag:after{content: ""; width: 40px; height: 40px; border-radius: 50%; background: blue; position: absolute; top: 0; left: 50%; margin: 0 0 0 -20px;}

How do I customize the scrollbar in a Swiper JS slider?

1 Answers1