Помогите решить проблему со слайдером, не xочет адаптироваться, не понимаю почему, делала аналогичные слайдеры в другиx проектаx не было с ним такиx проблем(были другие проблемы), с ним постоянно одни проблемы, которые решаю с помощью костылей. Почему он всем так нравится? Задавала слайдеру maxwidth: 459px и у меня все слайды были фиксированной ширины и не адаптировались.
.main-content__offer
button.slider-btn.slider-btn--prev
i.prev-special
button.slider-btn.slider-btn--next
i.next-special
.slider
.slider-banner
a.slider-banner__link(href="#")
img(src="static/images/content/special/special.jpg", alt="Работники на стройку")
.slider-banner__info
.slider-banner__job
h6.slider-banner__vacancy Работники на стройку
span.slider-banner__company Киевжитлобуд
.slider-banner__price <span>7000грн./мес</span>(+ премии)
.main {
padding: 35px 0 50px;
&__offer {
position: relative;
margin-bottom: 10px;
margin-left: -25px;
padding: 0 25px;
}
}
.slider {
&-btn {
padding: 10px;
transition: all ease-in-out .3s;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 10;
&--prev {
left: 0;
&:hover {
transform: translateX(-10px) scale(1.2);
}
}
&--next {
right: 0;
&:hover {
transform: translateX(10px) scale(1.2);
}
}
}
&-banner {
position: relative;
border-radius: 6px;
overflow: hidden;
img {
width: 100%;
}
&__link {
position: absolute;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&__info {
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
left: 0;
bottom: 0;
padding: 10px 30px 10px 15px;
background-color: rgba($black, 0.7);
color: $white;
}
&__vacancy {
font-size: 16px;
}
&__company {
font-size: 14px;
}
&__price {
span {
font-size: 18px;
display: block;
color: $action-color;
font-weight: 700;
}
}
}
}
// slider for specials offer
$('.slider').slick({
// variableWidth: true,
slidesToShow: 1,
slidesToScroll: 1,
speed: 700,
autoplay: true,
autoplaySpeed: 2000,
nextArrow: '.slider-btn--next',
prevArrow: '.slider-btn--prev'
});
Средний
