0
335
VistasSwiper slider, cómo reducir el ancho de la barra de desplazamiento
JavaScript
const projectsSwiper = new Swiper(".projects__swiper-start", { speed: 1000, slidesPerView: 3, navigation: { nextEl: ".projects__swiper-next", prevEl: ".projects__swiper-prev", }, watchOverFlow: true, simulateTouch: true, spaceBetween: 19, scrollbar: { el: ".projects__swiper-scroll", draggable: true, dragSize: 80, }, });HTML
<div class="projects__swiper-start swiper"> <div class="projects__swiper swiper-wrapper"> <div class="projects__swiper-slide swiper-slide"> <div class="projects__swiper-img"> <img src="images/projects/slide-1.jpg" alt="slide-1" /> </div> </div> <div class="projects__swiper-slide swiper-slide"> <div class="projects__swiper-img"> <img src="images/projects/slide-2.jpg" alt="slide-2" /> </div> </div> <div class="projects__swiper-slide swiper-slide"> <div class="projects__swiper-img"> <img src="images/projects/slide-3.jpg" alt="slide-3" /> </div> </div> <div class="projects__swiper-slide swiper-slide"> <div class="projects__swiper-img"> <img src="images/projects/slide-4.jpg" alt="slide-4" /> </div> </div> </div> </div>Ahora me he desplazado en todo el ancho, pero necesito reducirlo a 300 px y colocarlo en el centro, ya que encontré el control deslizante para reducir, pero con el ancho del desplazamiento, hay un problema.
¡Muchas gracias por adelantado!
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
dragSize - Tamaño del elemento arrastrable de la barra de desplazamiento en px.
No hay opción de API para controlar el ancho de swiper-scrollbar (el envoltorio). Si cambia esto por CSS personalizado, destruye la forma en que funciona la barra de desplazamiento.
/* will not work as it should */ .swiper-horizontal .swiper-scrollbar{ width: 50%!important; }Debe abrir Github Feature Req relacionado con esta idea: https://github.com/nolimits4web/swiper/issues
·
Juan Pablo Isaza
Denunciar
Responde la pregunta