steven preadly Posts - Answer Overflow

steven preadly

Explore posts from servers

•Created by steven preadly on 11/3/2024 in #front-end

How can I solve this swiper styling issue in the video ?

hello i am using Laravel to create a books store there are a section for highly ranked books i am using swiper Api in this swiper and below is the code the swiper in js and a video of that happiens whe relad the page

import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';
document.addEventListener('DOMContentLoaded', function(){
    const swiper  = new Swiper(".swiper",{
        // Optional parameters
        loop: true,
        slidesPerView: 5,
        spaceBetween: 30,
        breakpoints: {
            320: {
                slidesPerView:1,
                spaceBetween:30,
            },
            576:{
                slidesPerView:1,
                spaceBetween:1,
            },
            768:{
                slidesPerView:2,
                spaceBetween:4,
            },
            992:{
                slidesPerView:3,
                spaceBetween:3,
            },
            1200:{
                slidesPerView: 3,
                spaceBetween: 4,
            },
            1400: {
                slidesPerView:4,
                spaceBetween: 5
            }

        },
        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
        },

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

        // And if we need scrollbar
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    });
})

import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';
document.addEventListener('DOMContentLoaded', function(){
    const swiper  = new Swiper(".swiper",{
        // Optional parameters
        loop: true,
        slidesPerView: 5,
        spaceBetween: 30,
        breakpoints: {
            320: {
                slidesPerView:1,
                spaceBetween:30,
            },
            576:{
                slidesPerView:1,
                spaceBetween:1,
            },
            768:{
                slidesPerView:2,
                spaceBetween:4,
            },
            992:{
                slidesPerView:3,
                spaceBetween:3,
            },
            1200:{
                slidesPerView: 3,
                spaceBetween: 4,
            },
            1400: {
                slidesPerView:4,
                spaceBetween: 5
            }

        },
        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
        },

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

        // And if we need scrollbar
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    });
})

15 replies

KPCKevin Powell - Community

•Created by steven preadly on 6/29/2024 in #front-end

what are the ways that i can follow to mange the height in card created using bootstrap

18 replies

KPCKevin Powell - Community

•Created by steven preadly on 6/20/2024 in #front-end

Why is the <div> with position-absolute and start-100 positioned outside the container?

17 replies

Gaming

Programming