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