Swiper Slide не берет полную ширину карусели, даже если указано как Show 1 Slide ⇐ Javascript

[Anonymous]

Я пытаюсь заставить свои слайды заняться во всем швахте, он не предназначен для того, чтобы показать предыдущие и следующие слайды, только один, так как его в основном герой. за просмотр: < /p>

Код: Выделить всё

'use client';
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import './hero.css';
import TicketSearch from '../ticket-search/ticket-search';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper/modules';
import 'swiper/css';
import { Button } from '@mui/material';
import ChatIcon from '@mui/icons-material/Chat';  // or ChatBubble

const heroSlides = [
{
alt: 'Cumpleaños infantil',
mobileSrc: '/images/responsive-hero-img.png',
desktopSrc: '/images/responsive-hero-img-pc.png',
},
{
alt: 'Celebra tu cumpleaños',
mobileSrc: '/images/celebrate-birthday-hero.png',
desktopSrc: '/images/celebrate-birthday-hero.png',
},
{
alt: 'Fiesta empresarial',
mobileSrc: '/images/business-party-hero.png',
desktopSrc: '/images/business-party-hero.png',
},
];

function HeroSection({ desktopSrc, alt, layout }) {
return (

[img]{desktopSrc} alt={alt} className=[/img]





);
}

function HeroSlide({ mobileSrc, desktopSrc, alt, className }) {
return (


[img]{mobileSrc} alt={alt} className={className} /[/img]

);
}

export default function Hero() {
const [isDesktop, setIsDesktop] = useState(false);

useEffect(() => {
const checkIsDesktop = () => setIsDesktop(window.innerWidth >= 426);
checkIsDesktop();
window.addEventListener('resize', checkIsDesktop);
return () => window.removeEventListener('resize', checkIsDesktop);
}, []);

return (

{isDesktop ? (












) : (

)}


);
}
< /code>
Это CSS: < /p>
.hero-wrapper {
position: relative;
width: 100%;
height: 100%;
}

.hero-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}

.hero-section {
width: 100vw;
height: 50vh;
overflow: hidden;
}

/* Buttons over the image */
.button-group-regular{
display: flex;
gap: 20px;
position: absolute;
top: 72%;
left: 7%;

z-index: 10;

}
/* Buttons over the image */
.button-group-birthday{
display: flex;
gap: 20px;
position: absolute;
top: 70%;
left: 15%;
z-index: 10;

}
.button-group-vertical{
display: flex;
flex-direction: column-reverse;
gap: 20px;
position: absolute;
top: 59%;
left: 3%;
z-index: 10;

}

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

.swiper-slide {

width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

/* Make sure each slide's internal  element fills full space */
.swiper-slide picture {
display: block;
width: 100%;
height: 100%;
}

/* Ensure image fills its container */

/* Desktop: taller hero */
@media (min-width: 424px) {
.hero-section {
height: 52vh;
}
.hero-img{
object-fit: fill;
}
}
@media (min-width: 1023px) {
.hero-section{
height: 60vh;
}

}
/* Desktop: taller hero */
@media (min-width: 1400px) {
/* Buttons over the image */
.button-group-birthday{
display: flex;
gap: 20px;
position: absolute;
top: 70%;
left: 35%;
z-index: 10;

}
}

Вы можете найти полный веб -сайт, если хотите посмотреть его здесь


Подробнее здесь: https://stackoverflow.com/questions/796 ... pecified-a