When inserting text on a slide, for some reason, only the first item with the tag is displayed

. The next ones that follow him are not displayed at all. And in the code inspector on the page it is clear that they were loaded into html, but they themselves are not visible. tried z-index did not help.

<script> $(document).ready(function() { $('.mainSlider').slick({ dots: true, arrows: false, slidesToShow: 1, slideToScroll: 1, }) }) </script> 
 .topSlider { height: 676px; position: relative; } .mainSlider { height: 100%; } .slide__info { height: 100%; } .slide { background: url('../img/slide 1@2x.png') no-repeat; background-size: cover; &__overHeader{ font-family: 'Open Sans', sans-serif; font-size: 55px; font-weight: 700; text-transform: uppercase; margin-top: 130px; } } .slick-list, .slick-list * { height: 100%; } .slick-dots { bottom: 127px; } 
 <div class="slider mainSlider"> <div class="slide"> <div class="container"> <div class="row slide__info"> <p class="slide__overHeader">ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ</p> <p class="slide__header">ОсСнь-Π—ΠΈΠΌΠ° 18-19</p> <p class="slide__text">ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡ‚Π²ΠΎ ΠΈ оптовая ΠΏΡ€ΠΎΠ΄Π°ΠΆΠ° ТСнской ΠΎΠ΄Π΅ΠΆΠ΄Ρ‹. <br>ΠšΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½Π°Ρ брСндовая ΠΎΠ΄Π΅ΠΆΠ΄Π° ΠΏΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ Ρ†Π΅Π½Π°ΠΌ.</p> <a href="#" class="slide__button" type="button">ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³</a> </div> </div> </div> <div class="slide"> <div class="container"> <div class="row slide__info"> <p class="slide__overHeader">ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ</p> <p class="slide__header">ОсСнь-Π—ΠΈΠΌΠ° 18-19</p> <p class="slide__text">ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡ‚Π²ΠΎ ΠΈ оптовая ΠΏΡ€ΠΎΠ΄Π°ΠΆΠ° ТСнской ΠΎΠ΄Π΅ΠΆΠ΄Ρ‹. <br>ΠšΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½Π°Ρ брСндовая ΠΎΠ΄Π΅ΠΆΠ΄Π° ΠΏΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ Ρ†Π΅Π½Π°ΠΌ.</p> <a href="#" class="slide__button" type="button">ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³</a> </div> </div> </div> <div class="slide"> <div class="container"> <div class="row slide__info"> <p class="slide__overHeader">ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ</p> <p class="slide__header">ОсСнь-Π—ΠΈΠΌΠ° 18-19</p> <p class="slide__text">ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡ‚Π²ΠΎ ΠΈ оптовая ΠΏΡ€ΠΎΠ΄Π°ΠΆΠ° ТСнской ΠΎΠ΄Π΅ΠΆΠ΄Ρ‹. <br>ΠšΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½Π°Ρ брСндовая ΠΎΠ΄Π΅ΠΆΠ΄Π° ΠΏΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ Ρ†Π΅Π½Π°ΠΌ.</p> <a href="#" class="slide__button" type="button">ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³</a> </div> </div> </div> </div>

Here, you can see only the collection, and what goes in the markup after it is not displayed. What could be the problem?

  • It is still noticeable that when the page is just loading, this text appears for a second, then disappears - Sasha Chernikova

1 answer 1

Everything is seen:

 $('.mainSlider').slick({ dots: true, arrows: false, slidesToShow: 1, slideToScroll: 1, }); 
 .topSlider { height: 676px; position: relative; } .mainSlider { height: 100%; } .slide__info { height: 100%; } .slide { background: url('https://images.unsplash.com/photo-1526542215298-3ef7ea699e99?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60') no-repeat; background-size: cover; } .slide__overHeader{ font-family: 'Open Sans', sans-serif; font-size: 55px; font-weight: 700; text-transform: uppercase; margin-top: 130px; } .slick-list, .slick-list * { height: 100%; } .slick-dots { bottom: 127px; } .row.slide__info { position: relative; z-index: 1000; } 
 <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <div class="slider mainSlider"> <div class="slide"> <div class="container"> <div class="row slide__info"> <p class="slide__overHeader">ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ</p> <p class="slide__header">ОсСнь-Π—ΠΈΠΌΠ° 18-19</p> <p class="slide__text">ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡ‚Π²ΠΎ ΠΈ оптовая ΠΏΡ€ΠΎΠ΄Π°ΠΆΠ° ТСнской ΠΎΠ΄Π΅ΠΆΠ΄Ρ‹. <br>ΠšΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½Π°Ρ брСндовая ΠΎΠ΄Π΅ΠΆΠ΄Π° ΠΏΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ Ρ†Π΅Π½Π°ΠΌ.</p> <a href="#" class="slide__button" type="button">ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³</a> </div> </div> </div> <div class="slide"> <div class="container"> <div class="row slide__info"> <p class="slide__overHeader">ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ</p> <p class="slide__header">ОсСнь-Π—ΠΈΠΌΠ° 18-19</p> <p class="slide__text">ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡ‚Π²ΠΎ ΠΈ оптовая ΠΏΡ€ΠΎΠ΄Π°ΠΆΠ° ТСнской ΠΎΠ΄Π΅ΠΆΠ΄Ρ‹. <br>ΠšΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½Π°Ρ брСндовая ΠΎΠ΄Π΅ΠΆΠ΄Π° ΠΏΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ Ρ†Π΅Π½Π°ΠΌ.</p> <a href="#" class="slide__button" type="button">ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³</a> </div> </div> </div> <div class="slide"> <div class="container"> <div class="row slide__info"> <p class="slide__overHeader">ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ</p> <p class="slide__header">ОсСнь-Π—ΠΈΠΌΠ° 18-19</p> <p class="slide__text">ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡ‚Π²ΠΎ ΠΈ оптовая ΠΏΡ€ΠΎΠ΄Π°ΠΆΠ° ТСнской ΠΎΠ΄Π΅ΠΆΠ΄Ρ‹. <br>ΠšΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½Π°Ρ брСндовая ΠΎΠ΄Π΅ΠΆΠ΄Π° ΠΏΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ Ρ†Π΅Π½Π°ΠΌ.</p> <a href="#" class="slide__button" type="button">ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³</a> </div> </div> </div> </div>