文章/答案/技术大牛

发布

社区首页 >问答首页 >使用Swiper与hexo主题:高度变为0

问使用Swiper与hexo主题:高度变为0
EN

Stack Overflow用户

提问于 2017-10-10 09:11:23

回答 1查看 57关注 0票数 0

滑动版本: 4.0.0。
平台/目标和浏览器版本: Ubuntu 17，Chrome
生成器:HEXO3.0+ Hexo -主题-下一步

你所做的

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

全样本代码

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>

构建很好，没有错误。成功地包含了样式表和.js文件。

预期行为

我的页面顶部有一个像这这样的滑动区域

实际行为

滑动区域存在，但高度为0。如果我在示例之间放置文本，则滑动区域扩展到一个狭窄的范围，如下所示(页面顶部)。

我不知道我做错了什么

html

css

swiper.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-10-10 11:26:16

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

希望我能帮上忙。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46662847

复制

相似问题

问使用Swiper与hexo主题:高度变为0
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Swiper与hexo主题:高度变为0EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Swiper与hexo主题:高度变为0
EN