는 Flickity 슬라이더는 두 개의 div의

Question

사이에 표시 가져올 수 없습니다

그래서 여기 내 범인의 웹 사이트 : 어떤 이유 http://imranahmed.io/

, 내가 <div> 직접 내 flickity slider 아래에 표시하는 "내 정보"를 얻을 수 없다 - 대신 내 정보 페이지가 슬라이더와 겹치고 슬라이더가 배경으로 사라집니다. 여기

이미지 덮고있는 '내 소개'페이지를 보여주는 예입니다 :

내가 display:inside-block에 회전 목마의 CSS를 설정하려했지만 그 차이를 이렇게 만든되지 않았습니다 I 어떻게해야하는지 혼란 스럽네. 여기에 내 코드입니다 :

HTML :

--- 
layout: default 
title: index 
permalink:/
--- 

<script src="/bower_components/jquery/dist/jquery.min.js"></script> 
<script src="/static/js/flickity.pkgd.min.js"></script> 
<link href="/static/css/flickity.css" rel="stylesheet" media="screen"> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.flickity-slider').flickity({ 
      cellAlign: 'left', 
      contain: true, 
      autoPlay: true, 
      pageDots: false, 
      pauseAutoPlayOnHover: false 
     }); 
     $(".nav navbar-nav navbar-right").addClass("active"); 
    }); 
</script> 

<div class="navbar-wrapper"> 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header page-scroll"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
       <a class="navbar-brand" href="#page-top" id="i18_title"><span data-i18n="website.title">{{ site.title }}</span></a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-right" id="i18_navbar"> 
        {% for section in site.data.landing %} 
        <li> 
         <a class="page-scroll" href="#{{ section.id }}"> 
          <span data-i18n="{{ section.i18n }}">{{ section.name }}</span> 
         </a> 
        </li> 
        {% endfor %} 

       </ul> 
      </div> 
     </div> 
    </nav> 
</div> 

<div class="flickity-slider"> 
    {% for slider in site.data.slider %} 
    <div class="carousel-cell"><img class="carousel-image" src="{{ slider.img | prepend: site.baseurl }}" alt=""></div> 
    {% endfor %} 
</div> 

<div> 
{% for section in site.data.landing %} 
    {% assign loopindex = forloop.index | modulo: 2 %} 
    <section id="{{ section.id }}" class="features {% if loopindex != 1 %} gray-section {% endif %} {{ section.css }}" style="margin-top: 0px;"> 
     {% include sections/{{section.tpl}} %} 
    </section> 
{% endfor %} 
</div> 

about.html 페이지는 "컨테이너"여기

그리고 불리는 또 다른 DIV 클래스는 해당 CSS입니다 간단하다 : 난

.landing-page .flickity-slider{ 
    height: 30%; 
} 
.landing-page .carousel-cell{ 
    width: 100%; /* full width */ 
    height: 470px; /* height of carousel */ 
    max-height: 470px; 
    max-width: 100%; 
    margin-right: 10px; 
    display: inline-block; 
    position: relative; 

} 
.landing-page .carousel-image{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    max-width: 100% 
    max-height: 30% 
    object-fit: contain; 
} 

CSS에 익숙하지 않아서 내가 뭘 잘못하고 있는지 잘 모르겠다 - 도움과 조언을 많이 부탁드립니다!

감사합니다.

Answer 1

class=flickity-slider으로 div에서 position:absolute을 제거하면 이후 "about me"div가 올바르게 지워집니다.

more info :

절충, 그리고 가장 중요한 것은 절대 위치에 대해 기억해야 할 이러한 요소가 페이지에 요소의 흐름에서 제거하는 것입니다. 이 유형의 위치 지정을 갖는 요소는 다른 요소에 의해 영향을받지 않으며 다른 요소에 영향을주지 않습니다 ( ). 이 은 절대 좌표 을 사용할 때마다 고려해야 할 심각한 문제입니다. 남용 또는 부적절한 사용은 사이트의 유연성을 제한 할 수 있습니다.

Answer 2

변경

<div class="carousel"> 
    {% for slider in site.data.slider %} 
    <div class="carousel-cell"><img class="carousel-image" src="{{ slider.img | prepend: site.baseurl }}" alt=""></div> 
    {% endfor %} 
</div> 

에

<div class="flickity-slider"> 
{% for slider in site.data.slider %} 
<div class="carousel-cell"><img class="carousel-image" src="{{ slider.img | prepend: site.baseurl }}" alt=""></div> 
{% endfor %} 

코드

의이 부분 flickity-slider 클래스는 몇 가지 기본 스타일을 가지고 flickity의 "내부"클래스입니다. 이것이 나에 관한 섹션이 플리커 슬라이더의 맨 위에있는 이유입니다.

당신이 JS 코드도 클래스를 변경해야 할 것을 기억하십시오

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.carousel').flickity({ 
     cellAlign: 'left', 
     contain: true, 
     autoPlay: true, 
     pageDots: false, 
     pauseAutoPlayOnHover: false 
    }); 
    $(".nav navbar-nav navbar-right").addClass("active"); 
}); 

당신은 회전 목마의 높이를 정의하려면 그냥 경우에, 당신은 공식 문서의 예에서와 같이 그것을 할 수 있습니다 : http://flickity.metafizzy.co/options.html#setgallerysize