Swiper is one of the most popular slider libraries and features easy implementation of touch-enabled sliders and carousels. In the default configuration, Swiper navigation and bullets are placed inside swiper-container. However, depending on your design requirements, you may want to place these elements outside of swiper-container.
Fortunately, Swiper is very flexible for such customization; placing navigation and bullets outside of swiper-container can be accomplished by simply setting Swiper options with appropriate selectors.
const swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.custom-next',
prevEl: '.custom-prev',
},
pagination: {
el: '.custom- pagination',
clickable: true,
},
});
In this way, elements with classes such as.custom-next, .custom-prev, and .custom-pagination can be placed anywhere to serve as navigation and bullets in Swiper.
This method allows for greater design flexibility and can be customized for a variety of purposes, such as improving usability and enhancing branding.