Показывает только первые элементы, а дальше - пустота
<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: '/'
}
]