Habilité el swiper para la página que estoy creando y tengo la siguiente configuración:
const swiper3 = new Swiper('.ingredients-swiper', { grabCursor: true, direction: 'horizontal', pagination: { el: '.swiper-pagination', }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, scrollbar: { el: '.swiper-scrollbar', }, });Estas son básicamente las configuraciones predeterminadas que he copiado/pegado desde la página de inicio de Swiper.
El problema es que los controles de paginación y las flechas no se encuentran por ninguna parte.
Las flechas tienen display: none y la paginación se establece en la parte inferior, pero en la parte inferior de la pantalla y no en la parte inferior de las diapositivas.
Una vista previa en vivo se puede ver aquí:
https://www.bangcookies.com/pages/ingredients?preview_theme_id=120521556066
He seguido la estructura como se describe en la documentación:
<div class="ingredients-swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> ...restofslides... </div> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div>Eché un breve vistazo a tu ejemplo. El sitio se ve muy bien. Cuando ajusté sus flechas de display:none a display:inline block , ahora aparecerán sus flechas.
Entonces su posicionamiento absoluto necesita ser ajustado. En .swiper-button-next, .swiper-button-prev { }
Retire la top:50% y sus flechas se mostrarán en la parte inferior o se ajustarán según lo necesite