Swiper相对于标题中的其他元素的位置 [英] Swiper position relative to other element in header

查看：93
本文介绍了Swiper相对于标题中的其他元素的位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

您好我在我的头文件中实现了Swiper，但是我在正确定位时遇到了问题。



我想要什么：
导航菜单顶部的FUll高度Swiper



我有什么：
有限高度Swiper



或全高覆盖导航菜单



从我对css的非常有限的理解中，我认为我应该将我的 header.css 定位为相对位置，并将元素定位的css 定位作为绝对。问题是，我不知道Swiper将显示的图片的确切尺寸（定位为绝对），所以我不能使用其他标题元素的绝对值。但我可能是错的。



我对css / html的有限知识和误解表示歉意。非常新的学习者。



模板文件：
$ b 

 < header id =headerclass =header> 
< div class =header-swiper> 
 {％ -  include'swiperheader.swig'％} 
< / div> 
< div class =header-inner> 
 {％ -  include'_partials / header.swig'％} 
< / div> 
< / header>

完整高度覆盖导航菜单 

 < header id =headerclass =header> 
< div class =header-swiper> 
 {％ -  include'swiperheader.swig'％} 
< / div> 
< div class =header-inner> 
 {％ -  include'_partials / header.swig'％} 
< / div> 
< / header>

CSS结构：

主css： 

  .header {position：relative;背景：$ head-bg;身高：100％;} 
 
 .header-swiper {height：100％; } 
 .header-inner {position：relative;身高：100％; } 
 
 @importsite-meta; 
 @importsite-nav; 
 @importmenu;

Swiper css： 

  .swiper-container {
 position：absolute; 
宽度：100％; 
身高：30％; 
}

其他标题元素css：



site-meta.css 

  .site- meta {
 margin：0; 
 text-align：$ site-meta-text-align; 
 
 + mobile（）{text-align：center; } 
} 
 
 .brand {
 position：relative; 
 display：inline-block; 
填充：0 40px; 
颜色：$品牌颜色; 
背景：$ brand-bg; 
 border-bottom：none; 
&：hover {color：$ brand-hover-color; } 
} 
 
 .logo {
 display：inline-block; 
 margin-right：5px; 
 line-height：36px; 
 vertical-align：top; 
} 
 
 .site-title {
 display：inline-block; 
 vertical-align：top;

site-nav.css： $ b 

  .site-nav-toggle {
 display：none; 
位置：绝对; 
 top：10px; 
 left：10px; 
 + mobile（）{
 display：block; 
} 
 
按钮{
 margin-top：2px; 
 padding：9px 10px; 
背景：透明; 
 border：none; 
} 
} 
 
 .site-nav {
 + mobile（）{
 display：none; 
 margin：0 -10px; 
 padding：0 10px; 
明确：两者; 
 border-top：1px solid $ gray-lighter;

menu.css： 

  .menu {
 margin-top：20px; 
 padding-left：0; 
 text-align：center; 
} 
 
 .menu .menu-item {
 display：inline-block; 
 margin：0 10px; 
 list-style：none; 
 
 @media screen和（max-width：767px）{
 margin-top：10px; 
}

完整swiperheader.swig编码



<！ - Link Swiper's CSS - > =snippet-code-html lang-html prettyprint-override < link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css> <！ - 演示样式 - > <风格> html，body {position：relative;身高：100％; } body {background：#eee; font-family：Helvetica Neue，Helvetica，Arial，sans-serif; font-size：14px;颜色：＃000;保证金：0;填充：0; } .swiper-container {position：absolute;宽度：100％;身高：50％; } .swiper-slide {position：relative;高度：自动; background-position：center; background-size：cover; } .swiper-slide.background-image {position：relative; }< / style> <！ - Swiper - > < div class =swiper-container> < div class =swiper-wrapper> < div class =swiper-slidestyle =background-image：url（http://lorempixel.com/1000/1000/nightlife/1）> WCO< / div> < div class =swiper-slidestyle =background-image：url（http://lorempixel.com/1000/1000/nightlife/2）>< / div> < div class =swiper-slidestyle =background-image：url（http://lorempixel.com/1000/1000/nightlife/3）>< / div> < div class =swiper-slidestyle =background-image：url（http://lorempixel.com/1000/1000/nightlife/4）>< / div> < div class =swiper-slidestyle =background-image：url（http://lorempixel.com/1000/1000/nightlife/5）>< / div> < / DIV> <！ - 添加分页 - > < div class =swiper-pagination swiper-pagination-white>< / div> <！ - 添加箭头 - > < div class =swiper-button-next swiper-button-white>< / div> < div class =swiper-button-prev swiper-button-white>< / div> < / DIV> <！ - Swiper JS - > < script src =https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.min.js>< / script> <！ - 初始化Swiper - > <脚本> var swiper = new Swiper（'。swiper-container'，{spaceBetween：30，effect：'fade'，pagination：{el：'.swiper-pagination'，clickable：true，}，navigation：{nextEl：'.swiper -button-next'，prevEl：'.swiper-button-prev'，}，}）; < / script>

解决方案

<我没有完全得到你想要达到的目标。如果你想要得到一个完整高度的滑动滑板，你需要将你的滑板容器类的高度设置为100％而不是50个。当然，滑动滑板将覆盖你的第二部分。原因是，您将标题的高度设置为100％。因此，100％高度的刮板滑块将会覆盖整个联箱。



如果你想拥有100％的swiper，并且这张幻灯片下面的标题的第二部分只需将

 < div class =header-inner> 
 {％ -  include'_partials / header.swig'％} 
< / div>

不属于您的< / header> 标签。



如果您想拥有100％swiper，并且swiper顶部的第二个内容只需将

 < div class =header-inner> 
 {％ -  include'_partials / header.swig'％} 
< / div>

里面的swiper幻灯片。



你试着做些别的事情，请解释一下你到底需要改变什么。


Hi I am implementing Swiper in my header file but I have problems correctly positioning it.

WHAT I WANT: FUll height Swiper on top of navigation menu

WHAT I HAVE: Limited height Swiper

or full height covering the navigation menu

From my very limited understanding of css, I think I should have my header.css positioned as relative and element-wise css positioned as absolute. The problem is that I do not know the exact dimension of pictures going to be shown with Swiper (positioned as absolute) so I cann't use absolute for other header elements. But I am probably wrong.

I apologize for my limited knowledge and misunderstandings of css/html. Very new learner.

Template file:

limited height siwper

<header id="header" class="header" >
  <div class="header-swiper"> 
        {%- include 'swiperheader.swig' %} 
   </div>
  <div class="header-inner"> 
          {%- include '_partials/header.swig' %} 
   </div>
</header>

full height swiper covering nav-menus

<header id="header" class="header" >
  <div class="header-swiper"> 
        {%- include 'swiperheader.swig' %} 
   </div>
  <div class="header-inner"> 
          {%- include '_partials/header.swig' %} 
   </div>
</header>

CSS structure:

Main css:

.header { position: relative; background: $head-bg; height: 100%;}

.header-swiper { height: 100%; }
.header-inner { position: relative; height: 100%; }

@import "site-meta";
@import "site-nav";
@import "menu";

Swiper css:

.swiper-container {
      position: absolute;
      width: 100%;
      height: 30%;                                                                                                     
    }

Other header element css:

site-meta.css

.site-meta {                                                                                                           
  margin: 0;
  text-align: $site-meta-text-align;

  +mobile() { text-align: center; }
}

.brand {
  position: relative;
  display: inline-block;
  padding: 0 40px;
  color: $brand-color;
  background: $brand-bg;
  border-bottom: none;
  &:hover { color: $brand-hover-color; }
}

.logo {
  display: inline-block;
  margin-right: 5px;
  line-height: 36px;
  vertical-align: top;
}

.site-title {
  display: inline-block;
  vertical-align: top;

site-nav.css:

.site-nav-toggle {                                                                                                     
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  +mobile() {
    display: block;
  }

  button {
    margin-top: 2px;
    padding: 9px 10px;
    background: transparent;
    border: none;
  }
}

.site-nav {
  +mobile() {
    display: none;
    margin: 0 -10px;
    padding: 0 10px;
    clear: both;
    border-top: 1px solid $gray-lighter;
  }

menu.css:

.menu {
  margin-top: 20px;
  padding-left: 0;
  text-align: center;
}

.menu .menu-item {
  display: inline-block;
  margin: 0 10px;
  list-style: none;

  @media screen and (max-width: 767px) {
    margin-top: 10px;
  }

full swiperheader.swig code

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css">

  <!-- Demo styles -->
  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      position: absolute;
      width: 100%;
      height: 50%;
    }
    .swiper-slide {
			position: relative;
      height:auto;
      background-position: center;
      background-size: cover;
    }
    .swiper-slide.background-image {
			position: relative;
    }
  </style>

  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/1)">WCO</div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/2)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/3)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/4)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/5)"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-white"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
  </div>

  <!-- Swiper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      effect: 'fade',
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>

解决方案

I dont quite get what you're trying to achieve. If you are trying to get a full height swiper slide you need to set the height in your swiper-container class to 100% instead of 50. Of course the swiper slide will then cover your second part of the header. The reason for that is, that you set the height of your header to 100%. Therefore a swiper slide with 100% height will simply cover the whole header.

If you want to have a 100% swiper and the second part of your header underneath this slide just put the 

<div class="header-inner"> 
      {%- include '_partials/header.swig' %} 
</div>

part outside of your </header> Tag.

If you want to have a 100% swiper and the second content on Top of your swiper just put the 

<div class="header-inner"> 
      {%- include '_partials/header.swig' %} 
</div>

inside the swiper slides.

If you try to achieve something else please explain me what exactly you need to change.

这篇关于Swiper相对于标题中的其他元素的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆