Swiper style 4

Icon 1
Icon 2
Icon 3
Icon 4
Icon 5
Icon 6
Icon 7
Icon 8
Icon 9

Setting up the slider

Create the general slider structure

swiper
swiper-wrapper
swiper-slide
swiper-button-prev
swiper-button-next
swiper-scrollbar
swiper-scrollbar-drag

Copy the following script inside <head> tag

<style>
    .swiper-wrapper {
        -webkit-transition-timing-function:linear;
        -o-transition-timing-function:linear;
        transition-timing-function:linear;
        pointer-events: none;
    }
</style>
    scrollbar: {
        el: '.swiper-scrollbar',
        draggable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

Copy the following script before <body> tag

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper',{
    spaceBetween: 24,
    slidesPerView: 'auto',
    allowTouchMove: false,
    simulateTouch: false,
    speed: 3000,
    loop: true,
    a11y: false,
    autoplay: {
        delay: 0.1,
        disableOnInteraction: true
    },
    freeMode: {
        enabled: true,
        sticky: false
    },
    scrollbar: {
        el: '.swiper-scrollbar',
        draggable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    breakpoints: {
        768: {
            spaceBetween: 32
        }
    }
});
</script>