滑动箭头不可见，分页从页面底部（不是幻灯片底部）射出答案

【问题标题】：Swiper arrows not visible and pagination is shot off of the bottom of the page (not the bottom of the slides)滑动箭头不可见，分页从页面底部（不是幻灯片底部）射出
【发布时间】：2021-10-07 17:26:15
【问题描述】：

我为正在构建的页面启用了 swiper，并且我对其进行了以下设置：

  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',
    },
  });

这些基本上是我从 Swiper 的入门页面复制/粘贴的默认设置。

问题是找不到分页控件和箭头。

箭头有display: none，并且分页设置在底部，但在屏幕底部，而不是幻灯片底部。

可以在这里看到实时预览：

https://www.bangcookies.com/pages/ingredients?preview_theme_id=120521556066

我遵循了文档中描述的结构：

<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>

【问题讨论】：

当我检查演示页面上的元素时，看起来这个类没有设置显示 a:empty, article:empty, div:empty, dl:empty, h1:empty, h2 :empty, h3:empty, h4:empty, h5:empty, h6:empty, p:empty, section:empty, ul:empty { /* display: none; */ } 当我禁用它时，按钮出现了。我真的对shopify一无所知，但是css是用来隐藏它们的。

标签： javascript swiper

【解决方案1】：

我简要地看了一下你的例子。网站看起来很不错。当我将您的箭头从 display:none 调整为 display:inline block 时，您的箭头现在会出现。

那么你的绝对定位需要调整。在.swiper-button-next, .swiper-button-prev { }

删除top:50%，您的箭头将显示在底部或根据需要进行调整

【讨论】：