Ich versuche, ein ziemlich normales Karussell zu erstellen, mit zwei Pfeilen auf beiden Seiten in der vertikalen Mitte und Text mit einer Schaltfläche in der Mitte oben auf dem Bild. Es kann jedoch nichts über dem Bild angezeigt werden, obwohl die Pfeile und der Text alle absolut sind und einen höheren Z-Index haben. Hier ist ein Codepen mit meinem Code.http: //codepen.io/kathryncrawford/pen/AXmVA

nd hier ist mein HT

<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>

Mein CSS (das Slick CSS ist hier nicht enthalten, aber es ist im 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;
  }

Und mein 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
  });
});