Не понимаю как работает этот слайдер, я второй день не могу понять почему он создает глупые scroll, у меня есть main контейнер со стилями
width: 100%;
margin: 0 auto;
max-width: 1600px;
Тут вроде бы все окей, но
когда сужается страница slider продолжает занимать 1600px, то есть всегда занимает 100% разрешённой ему ширины, по моим предположениям он должен сужаться, адаптироваться, что-нибудь, а не всегда занимать 100%. Простите уже просто накипело, что не побывал
width 100% !important, оно вроде решает проблему, но потом при сужении получается еще какой-то очень странный scroll, так и самое прикольно что этот scroll зависит от количества слайдом, чем меньше слайдов тем на меньшей ширине экранна появляется scroll.
jsx
const SliderHome = () => {
return (
<div className={style.wrapper}>
<Swiper
className={style.slider}
pagination={{
dynamicBullets: true,
clickable: true,
}}
autoplay={{
delay: 3000,
disableOnInteraction: false,
}}
mousewheel={true}
spaceBetween={30}
slidesPerView={1}
speed={1300}
loop={true}
navigation={true}
modules={[Mousewheel, Autoplay, Pagination]}
>
<SwiperSlide className={style.slider__slide}>
<div className={style.slide__bonus}>
<h3 className={style.slide__name}>100р на баланс</h3>
<NavLink className={style.slide__link} to='bonuses'>
Перейти
</NavLink>
</div>
</SwiperSlide>
<SwiperSlide className={style.slider__slide}>
<div className={style.slide__telegram}>
<h3 className={style.slide__name}>наш telegram канал</h3>
<a
target='_blank'
href='https://web.telegram.org/a/'
className={style.slide__link}
>
Перейти
</a>
</div>
</SwiperSlide>
<SwiperSlide className={style.slider__slide}>
<div className={style.slide__deposit}>
<h3 className={style.slide__name}>10% при пополнении</h3>
<NavLink className={style.slide__link} to='bonuses'>
Депозит
</NavLink>
</div>
</SwiperSlide>
</Swiper>
</div>
)
}
scss
.wrapper {
width: 100%;
border-radius: 30px;
overflow: hidden;
position: relative;
display: flex;
}
.slider {
height: 300px;
&__slide {
border-radius: 30px;
height: 100%;
}
}
.slide {
&__bonus {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
background: var(--primary-color-gradient);
border-radius: inherit;
}
&__telegram {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
background: var(--blue-color-gradient);
border-radius: inherit;
}
&__deposit {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
background: var(--green-color-gradient);
border-radius: inherit;
}
&__name {
font-weight: 800;
font-size: calc(18px + 20 * ((100vw - 280px) / (1600 - 280)));
color: var(--white-color);
text-transform: uppercase;
padding: 0 5px;
}
&__link {
position: absolute;
right: 40px;
bottom: 25px;
border-radius: 15px;
color: var(--black-secondary-color);
font-size: 16px;
padding: 14px 40px 14px 15px;
font-weight: 500;
background: var(--white-color);
display: block;
&::before {
content: url('../../../public/images/svg/arrow.svg');
width: 17px;
position: absolute;
top: 50%;
left: 75%;
transform: translateY(-43%);
}
}
}
Ширина экрана
меньше 1600px (вот такой прикол)
Ширина экрана
больше 1600px (все как надо)
Теперь что происходит когда я пишу width 100% !important
.slider {
height: 300px;
width: 100% !important;
&__slide {
border-radius: 30px;
height: 100%;
width: 100% !important;
}
}
Вроде бы все окей, но чем больше слайдом тем на больше ширине появляется scroll
ПРИМЕР
3 слайда ширина экрана 600px -
scroll'a НЕТ
4 слайда ширина экрана 600px -
scroll ЕСТЬ
Напоминаю это когда я пишу width 100% !important
Вот такая у меня проблема с этим Siwpew)
Средний
