Как сделать кнопки для слайдера, чтобы вместе с изменение ширины экрана (резиновая верстка) сжимались и кнопки?
Есть слайдер, к нему есть кнопки "вперед" и "назад". Верстаю адаптив (резиновый), при уменьшении экрана страница сжимается, а кнопки нет. Позиция кнопок задана с помощью свойств right и left. Пробовала их задавать в %, это не помогает, страница ломается, кнопки не двигаются. Первый брекпоинт на 1024, кнопки ломают все на 1200.
<div class="swiper1"> <div class="swiper-wrapper"> <div class="swiper-slide about__card"> <img src="img/about1.png" class="about__slider-img img" alt="Дмитрий Гутенберг"> <h3 class="about__author text"> Дмитрий Гутенберг </h3> <p class="about__text text"> Эксперт (ну, почти) по всем вопросам (почти) </p> </div> <div class="swiper-slide about__card"> <img src="img/about2.png" class="about__slider-img img" alt="Анна Васильева"> <h3 class="about__author text"> Анна Васильева </h3> <p class="about__text text"> Как я здесь оказалась? А главное — зачем? </p> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> |
<div class="swiper1"> <div class="swiper-wrapper"> <div class="swiper-slide about__card"> <img src="img/about1.png" class="about__slider-img img" alt="Дмитрий Гутенберг"> <h3 class="about__author text"> Дмитрий Гутенберг </h3> <p class="about__text text"> Эксперт (ну, почти) по всем вопросам (почти) </p> </div> <div class="swiper-slide about__card"> <img src="img/about2.png" class="about__slider-img img" alt="Анна Васильева"> <h3 class="about__author text"> Анна Васильева </h3> <p class="about__text text"> Как я здесь оказалась? А главное — зачем? </p> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div>
Дополнительно:
Evgenii, float нет.
.swiper1 { max-width: 1136px; width: 100%; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .about__card { margin-bottom: 30px; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 28%; width: 42px; height: 42px; margin-top: 0; z-index: 10; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; color: transparent; transition: background-image .3s ease-in-out; } .swiper-button-next { background-image: url('../img/ab_arrow_next.svg'); } .swiper-button-prev { background-image: url('../img/ab_arrow.svg'); } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: -7%; right: auto; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: -7%; left: auto; } |
.swiper1 { max-width: 1136px; width: 100%; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .about__card { margin-bottom: 30px; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 28%; width: 42px; height: 42px; margin-top: 0; z-index: 10; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; color: transparent; transition: background-image .3s ease-in-out; } .swiper-button-next { background-image: url('../img/ab_arrow_next.svg'); } .swiper-button-prev { background-image: url('../img/ab_arrow.svg'); } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: -7%; right: auto; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: -7%; left: auto; }
Я понимаю, что в этом проблема. Но не знаю как ее решить, поэтому и обратилась за помощью.
Есть такой вариант "песочницы"
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания кнопок для слайдера, которые будут резиновыми и будут сжиматься вместе с изменением ширины экрана, вам необходимо использовать отзывчивый дизайн и правильно настроить CSS стили для кнопок.
Вот пример кода на языке PHP, который покажет вам, как можно реализовать такую функциональность:
<div class="slider"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> .slider { display: flex; justify-content: space-between; width: 100%; } .slide { flex: 1; max-width: 33.33%; /* каждая кнопка будет занимать 1/3 ширины экрана */ text-align: center; } @media screen and (max-width: 768px) { .slide { max-width: 50%; /* при изменении ширины экрана до 768px кнопки будут занимать половину ширины экрана */ } } @media screen and (max-width: 480px) { .slide { max-width: 100%; /* при изменении ширины экрана до 480px кнопки будут занимать всю ширину экрана */ } }
В этом примере мы создали контейнер `.slider`, в котором находятся кнопки `.slide`. Мы использовали свойство `flex` для контейнера, чтобы кнопки распределялись равномерно по ширине экрана. Затем мы добавили медиа-запросы для различных ширин экрана, чтобы изменять ширину кнопок в зависимости от размера экрана.
Таким образом, при изменении ширины экрана кнопки будут автоматически сжиматься и занимать соответствующее количество места на экране. Надеюсь, это поможет вам реализовать резиновые кнопки для слайдера.