I am trying to create a button carousel in Elementor, where the slidesPerView parameter is set manually to auto.
My goal is to achieve something that looks like this:
However, using the default Elementor carousel and adding buttons to it, it looks like this:
The buttons are spaced too far apart instead of being aligned next to each other. This seems to be due to the default slidesPerView being set to 3 (as far as I can tell).
I attempted to adjust slidesPerView to auto using the following JavaScript code:
var swiperElement = document.querySelector('#category-carousel .swiper');
var swiperInstance = swiperElement.swiper;
swiperInstance.params.slidesPerView = 'auto';
swiperInstance.update();
Unfortunately, this made the spacing issue worse, pushing the other buttons even further apart:
I suspect the issue lies in the CSS for .swiper-slide, as something seems to be affecting the layout. The button element itself appears to have the correct sizing:
To debug, I simplified the HTML structure by removing unnecessary class names, leaving only .swiper-slide. Here’s a snippet of the simplified HTML:
<div class="swiper-slide swiper-slide-active" data-slide="1" role="group" aria-roledescription="slide" aria-label="1 / 7" data-swiper-slide-index="0" style="margin-right: 10px;">
<a class="elementor-button elementor-button-link elementor-size-sm" href="/produkte/">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Alle Produkte</span>
</span>
</a>
</div>
I noticed that .swiper-slide has the CSS property:
flex-shrink: 0;
When I changed flex-shrink to 1, it somewhat fixed the issue, but scaling the viewport caused additional problems with inconsistent gaps:
Question:
How can I resolve this spacing issue and create a simple button carousel in Elementor that behaves consistently, with no large gaps or unpredictable spacing when resizing the display?
Additional Notes:
If the issue involves overriding Swiper.js or Elementor's default CSS, I’d appreciate any guidance on how to target and fix this effectively. Thank you!
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745592052a4634893.html
评论列表（0条）