Помогите со слайдером в css и html

Question

Помогите со слайдером в css и html

Георгий Бурмистров Ученик (234), на голосовании 8 месяцев назад

не понимаю в чем ошибка

  
       
         
           
          Ирина Лайм
 
           
        
 
         
           
          Мария Орлова
 
           
        
 
         
           
          Максим Петров
 
           
        
 
         
           
          Константин Назаров
 
           
        
 
         
           
          Лиза Весенняя

 .slider { 
  max-width: 1110px; 
  width: 100%; 
  margin: 0 auto; 
  text-align: left; 
  height: 700px; 
} 
 
.boxx { 
  display: flex; 
  gap: 30px; 
  overflow: hidden; 
} 
 
 
 
.slider-tile { 
  color: rgb(20, 16, 36); 
  font-family: Jost; 
  font-size: 50px; 
  font-weight: 600; 
  line-height: 160%; 
  letter-spacing: 0%; 
  text-align: left; 
} 
 
.wrappers { 
  width: 100%; 
  border: 3px solid black; 
  position: relative; 
  height: 100%; 
  overflow: hidden; 
} 
 
 
.controls { 
  position: absolute; 
  align-items: center; 
  bottom: 16px; 
  right: 48%; 
  display: block; 
  justify-content: center; 
} 
 
.bar { 
  display: flex; 
  justify-content: center; 
  width: 40px; 
  height: 40px; 
  align-items: center; 
  cursor: pointer; 
  opacity: .6; 
  transition: all .4 ease; 
} 
 
.right:active { 
  .boxx { 
    margin-left: -370px; 
  } 
}

Я вот учусь делать слайдеры
и у меня проблема :
В общем я сделал кнопку, чтобы при нажатии менялся margin-left(Последний селектор в css) и получался "слайдер"
Помогите пожалуйста решить проблему или подскажите как лучше сделать

Answer 1

так ты учишься или ноешь? учишься - так учись!

Answer 2

Проблема заключается в том, что вы пытаетесь использовать псевдокласс :active для изменения свойств элемента .boxx, но псевдокласс :active применяется к элементам, которые находятся в активном состоянии (когда они нажимаются). Вместо этого вы можете использовать JavaScript для добавления класса к .boxx при нажатии на кнопку и изменения margin-left через CSS. Вот как можно это сделать:
<div class="wrappers">
<div class="boxx">

</div>
<div class="controls">
<button class="left">
<img src="" alt="">
<img src="/img/Arrow - Left Circle.svg" alt="">
</button>
<button class="right">
<img src="/img/Arrow - Right Circle.png" alt="">
</button>
</div>
</div>

.wrappers {
position: relative;
overflow: hidden;
}

.boxx {
display: flex;
gap: 30px;
transition: margin-left 0.4s ease; /* Добавляем анимацию перехода */
}

.right-clicked .boxx {
margin-left: -370px; /* Устанавливаем нужное смещение */
}
JavaScript:
document.querySelector('.right').addEventListener('click', function() {
document.querySelector('.boxx').classList.add('right-clicked');
});

document.querySelector('.left').addEventListener('click', function() {
document.querySelector('.boxx').classList.remove('right-clicked');
});
Теперь при нажатии на кнопку "вправо" класс right-clicked добавляется к .boxx, что приводит к смещению слайдов. При нажатии на кнопку "влево" этот класс удаляется, и слайды возвращаются в исходное положение.

Answer 3

Dlazder Мудрец (16875) 9 месяцев назад

Слишком мало x в слове box