Kevin Powell - Community•2mo ago

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',
        },
    });
})

11 Replies

steven preadlyOP•2mo ago

Why no one answers my questions

Jochem•2mo ago

to be blunt: it's hard to tell without seeing it in your own browser. You're asking a very specific question about a particular library in a way that it can only be answered if someone (probably recently) encountered the exact same problem. If you had a live minimal demo, people might be able to take a look, but then again it's also often hard to diagnose issues for libraries people aren't familiar with

steven preadlyOP•2mo ago

I am sharing a demo its not regarding the lib it's regarding the css

Jochem•2mo ago

a demo video isn't really that useful for diagnosing a problem, just to see if the problem is replicated in your own browser. If the issue is with the CSS, you've also shared nothing of your HTML or CSS

steven preadlyOP•2mo ago

The lib is working swiper but the css is what crashed

Jochem•2mo ago

from just the video it looks kinda like a FOUC, flash of unstyled content, but it's hard to say for sure you're basically walking into a mechanic with drawings of what's wrong with your car and asking why they can't fix it

steven preadlyOP•2mo ago

What happens is that when the page loads the cards came under each other then after the age is fully loaded it becomes normal I can send the css and the html of the component

Jochem•2mo ago

yeah, that sounds like a FOUC. Usually that's fixed by including the CSS before the HTML its rendering, having some minimal version inline, or rendering a placeholder until it's done, but it's a hard to solve problem

steven preadlyOP•2mo ago

this is the html

<section class="highly-ranked-books-section bg-dark mt-sm-5 mb-md-10 px-md-0 py-lg-7 py-sm-5">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="display-3 text-center">Highly Rated Reads</h1>
                <div class="swiper .books">
                    <div class="swiper-wrapper">
                        @foreach($books as $book)
                            <div class="swiper-slide">
                                <div class="card">
                                    <img src="{{ $book->cover_image }}" class="card-img-top img-fluid" alt="...">
                                    <span id="badge" class="badge text-bg-primary z-1 d-inline">Primary</span>
                                    <div class="card-body">
                                        <h2 class="card-title">{{ $book->title }}</h2>
                                        <div class="d-flex justify-content-between">
                                            <a href="">{{ $book->genre->name }}</a>
                                            <livewire:rating.rating :book="$book"/>
                                        </div>
                                        <p class="card-text">{{ $book->excrept }}</p>
                                        <a href="#" class="btn btn-primary">buy now </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div cass="swipe-pagination"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="highly-ranked-books-section bg-dark mt-sm-5 mb-md-10 px-md-0 py-lg-7 py-sm-5">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1 class="display-3 text-center">Highly Rated Reads</h1>
                <div class="swiper .books">
                    <div class="swiper-wrapper">
                        @foreach($books as $book)
                            <div class="swiper-slide">
                                <div class="card">
                                    <img src="{{ $book->cover_image }}" class="card-img-top img-fluid" alt="...">
                                    <span id="badge" class="badge text-bg-primary z-1 d-inline">Primary</span>
                                    <div class="card-body">
                                        <h2 class="card-title">{{ $book->title }}</h2>
                                        <div class="d-flex justify-content-between">
                                            <a href="">{{ $book->genre->name }}</a>
                                            <livewire:rating.rating :book="$book"/>
                                        </div>
                                        <p class="card-text">{{ $book->excrept }}</p>
                                        <a href="#" class="btn btn-primary">buy now </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div cass="swipe-pagination"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
        </div>
    </div>
</section>

Jochem•2mo ago

a FOUC has to do with how the browser loads the HTML and the CSS, and how it has to render something before all the bits are available. The snippet of html you shared has nothing to do with this. this is why I'm saying a live example someone can see in their own browser is so important

steven preadlyOP•2mo ago

any ways i solved the problem iam using Laravel with Vite so some time bundling has some problems with lib that has CSS and JS together ,thank you

Gaming

Programming

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