swipe slider проблема с scrollbar

Вставил в разметку скроллбар, стили на него сразу подтянулись и растянулся по ширине в виде серой полоски, при пролистывании слайдера нет бегающего скролла, просто пустая полоска

<div class="works__swiper-container swiper-container">
                <ul class="works__list swiper-wrapper">
                    <li class="works__elem swiper-slide">
                        <div class="works__count">
                            01
                        </div>
                        <div class="works__title">
                            Legal
                            </br>
                            Services
                        </div>
                        <div class="works__text">
                            Often overlooked but highly important! You are ready to go public but what’s the best way
                            to set up your company or where to get funding capital? We are very proud that we are ISO certified and thus able to assist in one of the most important areas to set you up for long term success.
                        </div>

                    </li>
                    <li class="works__elem swiper-slide">
                        <div class="works__count">
                            02
                        </div>
                        <div class="works__title">
                            Blockchain
                            </br>
                            Development
                        </div>
                        <div class="works__text">
                            Our core specialty is of course the development of blockchain token according to your needs. Our team is highly specialised on ERC20 token on the Ethereum blockchain, as well as all other blockchains like Binance Smart Chain, Tron, Polkadot.
                        </div>

                    </li>
                    <li class="works__elem swiper-slide">
                        <div class="works__count">
                            03
                        </div>
                        <div class="works__title">
                            DeFi &
                            dApps
                        </div>
                        <div class="works__text">
                            Decentralised apps often go along with many blockchain projects. Use the power of
                            blockchain technology and smart contracts to get a highly secure, failure proof app that runs by itself.
                        </div>
                    </li>

                    <li class="works__elem swiper-slide">
                        <div class="works__count">
                            04
                        </div>
                        <div class="works__title">
                            ICO, STO, IEO
                            </br>
                        </div>
                        <div class="works__text">
                            We will assist you along the way from mapping out the idea to delivering the entire project,including website, dashboard, token development, marketing, and everything else that’s
                            needed to make your project a success.
                        </div>

                    </li>
                    <li class="works__elem swiper-slide">
                        <div class="works__count">
                            05
                        </div>
                        <div class="works__title">
                            Website
                            </br>
                            Development
                        </div>
                        <div class="works__text">
                            Sometimes all a customer needs is a beautiful website that perfectly represents their brand and products. Our design team is highly specialized in tech/blockchain related websites and we tend to exceed our customer’s expectations
                        </div>

                    </li>
                <div class="swiper-scrollbar"></div>
                
            </div>
        </div>


const swiperStatistics = new Swiper('.works__swiper-container', {
    wrapperClass: 'works__list',
    slideClass: 'works__elem',
    slidesPerView: 10,
    spaceBetween: 30,
    grabCursor: true,
    // allowTouchMove: false,
    // effect: 'fade',
    // centeredSlides: true,
    // loop: true,
    // slidesOffsetAfter: 0,
    watchOverflow: true,
    resistanceRatio: 0,
    navigation: {
        nextEl: '.works__next',
        prevEl: '.works__prev',
    },
    scrollbar: {
        el: ".swiper-scrollbar",
        // draggable: true,
       hide: false,
    },
    breakpoints: {
        1441: {
            slidesPerView: 4,
        },
        993: {
            slidesPerView: 3,
        },
        576: {
            slidesPerView: 2,
        },
        421: {
            slidesPerView: 1,
        }
    }


});

Ответы (1 шт):

Автор решения: Evgeniy Kozynchenko

Добавление скроллбара решило проблему

import SwiperCore, { Navigation, Pagination, Scrollbar } from 'swiper/core';
SwiperCore.use([Navigation, Pagination, Scrollbar]);
→ Ссылка