Как сделать плавное перемещение блока div при нажатии на кнопку?

Как можно настроить плавное перемещение блока минии под выбранной кнопкой при ее нажатии с использованием JavaScript и библиотеки Swiper?
  • 26 июня 2024 г. 7:11
Ответы на вопрос 2
Для создания плавного перемещения блока div при нажатии на кнопку можно использовать следующий код на чистом JavaScript:

HTML:
```html
<button id="moveButton">Move Block</button>
<div id="block" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>
```

JavaScript:
```javascript
const moveButton = document.getElementById('moveButton');
const block = document.getElementById('block');

moveButton.addEventListener('click', () => {
  block.style.transition = 'transform 0.5s';
  block.style.transform = 'translateX(100px) translateY(100px)';
});
```

Для настройки плавного перемещения блока минии под выбранной кнопкой при ее нажатии с использованием JavaScript и библиотеки Swiper, можно сделать следующим образом:

HTML:
```html
<div id="swiper" class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>
<button class="swiper-button-prev">Prev</button>
<button class="swiper-button-next">Next</button>
```

JavaScript:
```javascript
const swiper = new Swiper('#swiper', {
  slidesPerView: 1,
  spaceBetween: 10,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
```

При нажатии на кнопки "Prev" и "Next" в Swiper произойдет плавное перемещение блока минии под выбранной кнопкой.
Немного поправил  ваш код
Похожие вопросы