0

Приветствую дорогие пользователи данной платформы! Подскажите пожалуйста какие есть более правильные способы расположения кнопки в слайдере?

Дополнение: Проблема заключается в том что при изменении размеров окна/девайсов, она съезжает в другое место.

.carousel-inner {
  max-height: 470px;
}

.carousel-button {
  position: absolute;
  top: 250px;
  left: 250px;
  /* bottom: 0; */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 5px 10px 5px;
  color: #fff;
  text-align: center;
  background-color: #292929;
  border: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<div class="slider container-fluid p-0 h-75">
  <div id="carouselExampleControls" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://i.ibb.co/X301YK2/slider.jpg" class="d-block w-100" alt="knipping85">
      <button class="carousel-button">Подробнее о продукте</button>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
</div>

Как выглядит слайдер: слайдер

3
  • Есть еще какие-нибудь варианты?
    – yspesny
    30 мая 2022 в 14:36
  • Единственное что у вас кнопка, скорее всего, ведет на другую страницу, поэтому вместо тэга <button> лучше использовать <a>
    – yspesny
    30 мая 2022 в 14:38
  • Просто суть в том что при изменение разрешения окна, кнопка уезжает. Как можно решить это?
    – hhru
    30 мая 2022 в 18:25

1 ответ 1

0

Можете изменить пиксели на проценты. Например:

top: 50%;
left: 18%;

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.