将 Swiper 与 hexo 主题一起使用：高度变为 0

Question

刷卡器版本：4.0.0.
Platform/Target 和浏览器版本：Ubuntu 17，Chrome
生成器：Hexo 3.0 + Hexo-theme-next

你做了什么

我正在尝试将 Swiper 放在我的索引页的页眉区域。我所做的是将演示文件放入一个 swiperheader.swig 文件中。删除标签，并使用 CDNS 链接。

完整样本code

HTML 片段

<body itemscope itemtype="http://schema.org/WebPage" lang="{{ page.lang || page.language || config.language }}">

  {% set container_class = "container " %}
  {% if theme.sidebar.position %}
    {% set container_class = container_class + 'sidebar-position-' + theme.sidebar.position %}
  {% endif %}

  <div class="{{ container_class }} {% block page_class %}{% endblock %}">
    <div class="headband"></div>
    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
    {% include 'swiperheader.swig' %}                                                                                  
      <div class="header-inner"> {%- include '_partials/header.swig' %} </div>
    </header>

构建正常，没有错误。成功包含样式 sheet 和 .js 文件。

预期行为

我页面顶部的滑动区域，例如 this

实际行为

刷卡区域存在，但高度为 0。如果我在 SAMPLE 之间放置文本，则刷卡区域会扩展到一个窄带，如下所示（页面顶部）。

我不确定我做错了什么

Answer 1

我不熟悉 hexo，但我遇到过类似的 swiper 错误和幻灯片中的图像。在我的例子中，问题是我的滑动器幻灯片中的图像具有绝对位置。每个具有绝对位置的元素都没有高度，这再次导致滑动器滑动太小，因为滑动器根据其内部元素计算高度。

希望能帮到你。

将 Swiper 与 hexo 主题一起使用：高度变为 0

Use Swiper with hexo themes: height becomes 0

html

css

swiper

你做了什么

预期行为

实际行为