Почему не показывает другие элементы в Swiper JS?

Question

[Uzi82]

Показывает только первые элементы, а дальше - пустота

<Swiper
                    slidesPerView={4}
                    centeredSlides={true}
                    spaceBetween={30}
                    grabCursor={true}
                    pagination={{
                      clickable: true,
                    }}
                    modules={[Pagination]}
                    className="mySwiper"
                >
                    {
                        categoryList.map(el=>{
                            return(<SwiperSlide key={el.id}>
                                <Element image={el.background}>
                                    <ElText>
                                        {el.title}
                                    </ElText>
                                </Element>
                            </SwiperSlide>)
                        })
                    }
                </Swiper>

CSS

#app {
    height: 100%;
}
html,
body {
    position: relative;
    height: 100%;
}

body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: flex;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Список

import type { categoryType } from "../"

export const categoryList: categoryType[] = [
    {
        id: '1',
        background: require('../UI/TechBg.png'),
        title: 'Tech',
        path: '/'
    },
    {
        id: '2',
        background: require('../UI/ElectronicsBg.png'),
        title: 'Electronics',
        path: '/'
    },
    {
        id: '3',
        background: require('../UI/HealthBeautyBg.png'),
        title: 'Health &\nBeauty',
        path: '/'
    },
    {
        id: '4',
        background: require('../UI/TechBg.png'),
        title: 'Fashion',
        path: '/'
    },
    {
        id: '5',
        background: require('../UI/TechBg.png'),
        title: 'Furniture',
        path: '/'
    },
    {
        id: '6',
        background: require('../UI/TechBg.png'),
        title: 'Sports',
        path: '/'
    },
    {
        id: '7',
        background: require('../UI/TechBg.png'),
        title: 'Tech',
        path: '/'
    },
    {
        id: '8',
        background: require('../UI/ElectronicsBg.png'),
        title: 'Electronics',
        path: '/'
    },
    {
        id: '9',
        background: require('../UI/HealthBeautyBg.png'),
        title: 'Health &\nBeauty',
        path: '/'
    },
    {
        id: '10',
        background: require('../UI/TechBg.png'),
        title: 'Fashion',
        path: '/'
    },
    {
        id: '11',
        background: require('../UI/TechBg.png'),
        title: 'Furniture',
        path: '/'
    },
    {
        id: '12',
        background: require('../UI/TechBg.png'),
        title: 'Sports',
        path: '/'
    }
]

Comments

[szQocks]

попробуй добавить в компонент - import 'swiper/css';, если что-то поменяется в лучшую сторону, то проблема в твоих стилях

[Uzi82]

szQocks, у меня такая проблема была и раньше, но тогда даже стилей не было)
Вряд-ли это правда