Как поместить пагинацию внутрь слайда, swiper js?

Для того чтобы поместить пагинацию внутрь слайда в библиотеке Swiper.js, вам нужно выполнить несколько шагов:

  1. Создайте контейнер для слайдера и пагинации в HTML:
<div 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 class="swiper-pagination"></div>
</div>
  1. Инициализируйте Swiper.js, указав опцию pagination и pagination.el селектором элемента пагинации:
var swiper = new Swiper('.swiper-container', {
    slidesPerView: 1,
    spaceBetween: 10,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
});
  1. С помощью CSS оформите пагинацию внутри каждого слайда. Например:
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #333;
    margin: 0 5px;
}

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