画像の上に滑らかなスライダーのテキスト

Question

私は、垂直中央の両側に2つの矢印があり、画像の真ん中にボタンがあるテキストで、かなり普通のカルーセルを作ろうとしています。矢印とテキストは絶対的で絶対的なものであり、Zインデックスが高いものの、画像の上に表示されるものは得られません。コードにはコードがあります。 http://codepen.io/kathryncrawford/pen/AXmVAz

そして、ここでは私のHTML

<div class="slick-slider"> 
    <div> 
     <img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""> 
     <div class="info"> 
     <h1 class="slider-heading">Heading</h1> 
      <p class="slider-subheading lead">Subheading</p> 
      <a class="btn btn-large btn-danger" href="">button text</a> 
     <p class="down-arrow"> 
      <a class="btn btn-large btn-down-arrow" href="#theend"> 
       <i class="fa fa-chevron-down fa-lg" aria-hidden="true"></i> 
      </a> 
     </p> 
     </div> 
    </div> 
    <div> 
     <img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""> 
    </div> 
    <div> 
     <img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""> 
    </div> 
</div> 

私のCSS（滑らかなCSSはここに含まれていますが、それはcodepenであるされていない）

.slick-slider img { /* keep images full screen */ 
    width: 100%; 
    } 

    .chevron-container { /* full slider height container for chevrons */ 
    height: 100%; 
    position: absolute; 
    width: 100px; 
    } 

    .slick-right { /* keeps right arrow to the right */ 
    right: 0; 
    top: 0; 
    } 

    .chevron-container > .fa { /* positions chevrons in vertical center */ 
    bottom: 0; 
    color: white; 
    font-size: 10em; 
    height: 1em; 
    margin: auto; 
    position: absolute; 
    top: 0; 
    width: 5em; 
    z-index: 10; 
    } 

    .slick-slider .info { 
    color: white; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    line-height: 100vh; 
    text-align: center; 
    z-index: 10; 
    } 

    .slick-slider .info > div { 
    display: inline-block !important; 
    vertical-align: middle; 
    } 

そして、私のJSだ

jQuery(function($){ 
    $('.slick-slider').slick({ 
    accessibility: true, 
    adaptiveHeight: true, 
    arrows: true, 
    infinite: true, 
    mobileFirst: true, 
    nextArrow: '<div class="chevron-container slick-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></span><span class="sr-only">Next</span></div>', 
    prevArrow: '<div class="chevron-container"><i class="fa fa-chevron-left" aria-hidden="true"></i></span><span class="sr-only">Previous</span></div>', 
    slidesToShow: 1 
    }); 
}); 

Answer 1

する必要があります

だから、.infoの物は親に絶対配置されるべきだと分かっている。

Answer 2

position: relative〜.slide-slideを追加するだけです。

jQuery(function($){ 
 
    $('.slick-slider').slick({ 
 
    accessibility: true, 
 
    adaptiveHeight: true, 
 
    arrows: true, 
 
    infinite: true, 
 
    mobileFirst: true, 
 
    nextArrow: '<div class="chevron-container slick-right"><i class="fa fa-chevron-right" aria-hidden="true"></i></span><span class="sr-only">Next</span></div>', 
 
    prevArrow: '<div class="chevron-container"><i class="fa fa-chevron-left" aria-hidden="true"></i></span><span class="sr-only">Previous</span></div>', 
 
    slidesToShow: 1 
 
    }); 
 
});

.slick-slider 
 
{ 
 
    position: relative; 
 

 
    display: block; 
 
    box-sizing: border-box; 
 

 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 

 
    -webkit-touch-callout: none; 
 
    -khtml-user-select: none; 
 
    -ms-touch-action: pan-y; 
 
    touch-action: pan-y; 
 
    -webkit-tap-highlight-color: transparent; 
 
} 
 

 
.slick-list 
 
{ 
 
    position: relative; 
 

 
    display: block; 
 
    overflow: hidden; 
 

 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.slick-list:focus 
 
{ 
 
    outline: none; 
 
} 
 
.slick-list.dragging 
 
{ 
 
    cursor: pointer; 
 
    cursor: hand; 
 
} 
 

 
.slick-slider .slick-track, 
 
.slick-slider .slick-list 
 
{ 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    -moz-transform: translate3d(0, 0, 0); 
 
    -ms-transform: translate3d(0, 0, 0); 
 
    -o-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
} 
 

 
.slick-track 
 
{ 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 

 
    display: block; 
 
} 
 
.slick-track:before, 
 
.slick-track:after 
 
{ 
 
    display: table; 
 

 
    content: ''; 
 
} 
 
.slick-track:after 
 
{ 
 
    clear: both; 
 
} 
 
.slick-loading .slick-track 
 
{ 
 
    visibility: hidden; 
 
} 
 

 
.slick-slide 
 
{ 
 
    display: none; 
 
    float: left; 
 
    position: relative; 
 
    height: 100%; 
 
    min-height: 1px; 
 
} 
 
[dir='rtl'] .slick-slide 
 
{ 
 
    float: right; 
 
} 
 
.slick-slide img 
 
{ 
 
    display: block; 
 
} 
 
.slick-slide.slick-loading img 
 
{ 
 
    display: none; 
 
} 
 
.slick-slide.dragging img 
 
{ 
 
    pointer-events: none; 
 
} 
 
.slick-initialized .slick-slide 
 
{ 
 
    display: block; 
 
} 
 
.slick-loading .slick-slide 
 
{ 
 
    visibility: hidden; 
 
} 
 
.slick-vertical .slick-slide 
 
{ 
 
    display: block; 
 

 
    height: auto; 
 

 
    border: 1px solid transparent; 
 
} 
 
.slick-arrow.slick-hidden { 
 
    display: none; 
 
} 
 
.slick-slider img { /* keep images full screen */ 
 
    width: 100%; 
 
} 
 

 
.chevron-container { /* full slider height container for chevrons */ 
 
    height: 100%; 
 
    position: absolute; 
 
    width: 100px; 
 
} 
 

 
.slick-right { /* keeps right arrow to the right */ 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
.chevron-container > .fa { /* positions chevrons in vertical center */ 
 
    bottom: 0; 
 
    color: white; 
 
    font-size: 10em; 
 
    height: 1em; 
 
    margin: auto; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 5em; 
 
    z-index: 10; 
 
} 
 

 
.slick-slider .info { 
 
    color: white; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    line-height: 100vh; 
 
    text-align: center; 
 
    z-index: 10; 
 
} 
 

 
.slick-slider .info > div { 
 
    display: inline-block !important; 
 
    vertical-align: middle; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script> 
 
<div class="slick-slider"> 
 
    <div> 
 
    <img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""> 
 
    <div class="info"> 
 
     <h1 class="slider-heading">Heading</h1> 
 
     <p class="slider-subheading lead">Subheading</p> 
 
     <a class="btn btn-large btn-danger" href="">button text</a> 
 
     <p class="down-arrow"> 
 
     <a class="btn btn-large btn-down-arrow" href="#theend"> 
 
      <i class="fa fa-chevron-down fa-lg" aria-hidden="true"></i> 
 
     </a> 
 
     </p> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""> 
 
    </div> 
 
    <div> 
 
    <img class="img-fluid" src="http://www.placecage.com/1500/750" alt=""> 
 
    </div> 
 
</div>