Для создания swiper с внутренними кнопками, вам потребуется использовать вложенные элементы внутри каждого слайда. Оберните содержимое каждого слайда в контейнер и добавьте кнопки внутри этого контейнера. Ниже приведен пример HTML-кода:
```html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-content">
<!-- Контент слайда -->
<button>Кнопка 1</button>
<button>Кнопка 2</button>
</div>
</div>
<div class="swiper-slide">
<div class="slide-content">
<!-- Контент слайда -->
<button>Кнопка 3</button>
<button>Кнопка 4</button>
</div>
</div>
<!-- Другие слайды -->
</div>
</div>
```
Затем используйте JavaScript для инициализации swiper:
```javascript
var swiper = new Swiper('.swiper-container', {
// Опции и настройки swiper
});
```
Чтобы исправить проблему с кривой работой swiper при использовании кнопок в слайдах, проверьте, нет ли конфликта событий click и swipe. Возможно, при нажатии на кнопки происходит срабатывание как события click, так и события swipe, что может приводить к нежелательным результатам. Попробуйте привязать обработчик события click к кнопкам и отменить распространение события, чтобы предотвратить срабатывание события swipe:
```javascript
document.querySelectorAll('.slide-content button').forEach(function(button) {
button.addEventListener('click', function(event) {
event.stopPropagation();
// Ваш обработчик клика на кнопку
});
});
```
Если проблема не решается или требуются другие дополнительные функции, вы можете рассмотреть альтернативные библиотеки со схожими возможностями, такие как Slick Carousel или Flickity. Обе они также поддерживают горизонтальный скролл и имеют настройки для создания ряда кнопок.