CMS Swiper style 5

Bookmark
Bookmark
Save a bookmark
Lock
Lock
Geometric lock
Camp tent
Camp tent
Big tent with a flag
Leaf
Leaf
Organic farming
Open door
Open door
Square open doors
Flag
Flag
Flag waving flag with a small straight post
Key
Key
Old fashioned key

Options

Turn on the left - right button element
Turn on the dynamic pagination

Setting up the slider

Create the general slider structure

swiper
swiper-wrapper
swiper-slide

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: 1,
    grabCursor: true,
    autoHeight: true,
    loop: true,
    a11y: false,
    breakpoints: {
        479: {
            slidesPerView: 2,
            spaceBetween: 24
        },
        768: {
            slidesPerView: 3,
            spaceBetween: 32
        },
        992: {
            slidesPerView: 4,
            spaceBetween: 32
        }
    }
});
</script>