0

Имеется слайдер текста. Сделано на коленке, так что на хороший код рассчитывать не нужно. Все же, по какой причине при нажатии на кнопку(кружок) срабатывает якорь и страница сайта опускается вниз? По возможности, предложите вариант исправления. Соответствующие HTML и CSS приведены ниже

.review {
  background-color: #555;
  background-repeat: no-repeat;
  background-size: 1600px;
  background-position: top;
  height: 250px;
  display: flex;
  overflow-x: scroll;
  position: relative;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overflow: hidden;
}

.review-info {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  margin-right: 0px;
  box-sizing: border-box;
  transform-origin: center;
  transform: scale(1);
  scroll-snap-align: center;
  color: black;
  font-family: 'Lato-Light';
  font-size: 20px;
}

.review-quote {
  margin-top: 50px;
  text-align: center;
  color: white;
  line-height: 1.5em;
  width: 890px;
  height: 20%;
}

.review-label {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.review-author {
  color: white;
  font-family: 'Lato-Bold';
}

.review-author::after {
  content: "";
  padding-right: 10px;
  border-right: 1.3px solid white;
  display: inline-block;
  height: 15px;
}

.slider-group {
  margin-left: 10px;
  box-sizing: border-box;
  position: relative;
  text-align: center;
  display: flex;
  column-gap: 10px;
}

.slider__dot[isActive="true"] {
  background-color: white;
}

.slider__dot {
  display: inline-block;
  height: 7px;
  width: 7px;
  border-radius: 50%;
  border: 2px solid white;
}
<div class="review">

  <div class="review-info" id="review-first">
    <div class="review-quote">"Suspenids tempor turpis odio, sit amet cursus leo consequat non. Maecenas lacinia faucibus enimqui interdum dolor pulvinar vitae."</div>

    <div class="review-label">
      <div class="review-author">Jonny Doe</div>
      <div class="slider-group">
        <a class="slider__dot" href="#review-first" isActive="true"></a>
        <a class="slider__dot" href="#review-second"></a>
        <a class="slider__dot" href="#review-third"></a>
      </div>
    </div>
  </div>

  <div class="review-info" id="review-second">
    <div class="review-quote">"Suspenids tempor turpis odio, sit amet cursus leo consequat non. Maecenas lacinia faucibus enimqui interdum dolor pulvinar vitae."</div>
    <div class="review-label">
      <div class="review-author">John Doe</div>
      <div class="slider-group">
        <a class="slider__dot" href="#review-first"></a>
        <a class="slider__dot" href="#review-second" isActive="true"></a>
        <a class="slider__dot" href="#review-third"></a>
      </div>
    </div>
  </div>

  <div class="review-info" id="review-third">
    <div class="review-quote">"Suspenids tempor turpis odio, sit amet cursus leo consequat non. Maecenas lacinia faucibus enimqui interdum dolor pulvinar vitae."</div>
    <div class="review-label">
      <div class="review-author">Johnathan Doe</div>
      <div class="slider-group">
        <a class="slider__dot" href="#review-first"></a>
        <a class="slider__dot" href="#review-second"></a>
        <a class="slider__dot" href="#review-third" isActive="true"></a>
      </div>
    </div>
  </div>
</div>

1
  • Потому что якори для такого не предназначены. Без js тут вроде бы не обойтись, потому что существующие решения так же прокручиваются, если есть якори и не на всю высоту слайд. Commented 26 окт. 2022 в 17:53

1 ответ 1

1

якорь так устроен, что когда ты нажимаешь на ссылку с якорем, то оно автоматом скролится к блоку с таким же айди, и этот блок должен быть прибит к верхней границе браузера ( это стандартное поведение якоря )

Если хочешь слайдер на чистом HTML / CSS, то лучше переделать его на input типа radio

Ваш ответ

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

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