Позиционирование кнопок управления слайдером слева и справа от пагинации

186

24 ноября 2021, 18:40

Как расположить стрелки управления слайдером слева и справа от пагинации?

Не пойму, как лучше сделать позиционирование кнопок навигации.

Answer 1

Ну как-то так:

body { 
  background-color: dimgray; 
} 
 
.control { 
  display: block; 
  position: relative; 
  width: 120px; 
  margin: 50px auto; 
} 
 
.control span { 
  display: inline-block; 
  width: 10px; 
  height: 10px; 
  border: 2px solid #fff; 
  border-radius: 10px; 
  margin: 0 5px; 
} 
 
.control .active { 
  background-color: #fff; 
} 
 
.control .active:hover { 
  background-color: #fff; 
  border-color: #fff; 
  cursor: default; 
} 
 
.control .left { 
  display: inline-block; 
  position: absolute; 
  left: -30px; 
  border: 2px solid #fff; 
  border-width: 0 0 2px 2px; 
  width: 15px; 
  height: 15px; 
  line-height: 0; 
  font-size: 0; 
  -webkit-transform: rotate(45deg); 
  -ms-transform: rotate(45deg); 
  -o-transform: rotate(45deg); 
  transform: rotate(45deg); 
} 
 
.control .right { 
  display: inline-block; 
  position: absolute; 
  right: -30px; 
  border: 2px solid #fff; 
  border-width: 0 0 2px 2px; 
  width: 15px; 
  height: 15px; 
  line-height: 0; 
  font-size: 0; 
  -webkit-transform: rotate(-135deg); 
  -ms-transform: rotate(-135deg); 
  -o-transform: rotate(-135deg); 
  transform: rotate(-135deg); 
} 
 
.control span:hover, 
.control .left:hover, 
.control .right:hover { 
  cursor: pointer; 
  border-color: #000; 
} 
 
.control .left:hover { 
  left: -33px; 
} 
 
.control .right:hover { 
  right: -33px; 
} 
 
.control .left, 
.control .right { 
  -webkit-transition: all 0.1s ease-in-out; 
  -moz-transition: all 0.1s ease-in-out; 
  -o-transition: all 0.1s ease-in-out; 
  transition: all 0.1s ease-in-out; 
}

<div class="control"> 
  <div class="left"></div> 
  <span class="active"></span><span></span><span></span><span></span><span></span> 
  <div class="right"></div> 
</div>

Answer 2

Обычно делаю такую вёрстку:

.slider-button { 
  display: flex; 
  flex-direction: row; 
  justify-content: space-between; 
  align-items: center; 
  width: 100%; 
  max-width: 400px; 
  height: 40px; 
  margin: 0 auto; 
} 
 
.slider-button .button { 
  display: block; 
  width: 30px; 
  height: 30px; 
  background: url('https://i.imgur.com/8pqCQ7Z.png') no-repeat center center / 100% auto; 
  opacity: .65; 
  cursor: pointer; 
} 
 
.slider-button .button.-prev { 
  transform: rotate(180deg); 
} 
 
.slider-button .button:hover { 
  opacity: 1; 
} 
 
.slider-button .dots { 
  max-width: 100%; 
  cursor: default; 
} 
 
.slider-button .dot { 
  display: inline-block; 
  width: 14px; 
  height: 14px; 
  border: 2px solid #000; 
  border-radius: 100%; 
  opacity: .65; 
} 
 
.slider-button .dot:not(:last-child) { 
  margin-right: 5px; 
} 
 
.slider-button .dot:not(.--active):hover { 
  opacity: 1; 
  cursor: pointer; 
} 
 
.slider-button .dot.--active { 
  background: #000; 
}

<div class="slider-button"> 
  <div class="button -prev"></div> 
  <div class="dots"> 
    <div class="dot --active"></div> 
    <div class="dot"></div> 
    <div class="dot"></div> 
    <div class="dot"></div> 
    <div class="dot"></div> 
    <div class="dot"></div> 
    <div class="dot"></div> 
  </div> 
  <div class="button -next"></div> 
</div>