最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

swiper.js - How to Fix Spacing Issues in Elementor Carousel for a Button Carousel with slidesPerView Set to Auto? - Stack Overfl

programmeradmin1浏览0评论

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!

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论