There is a slider - how to fix the text - so that when scrolling it remains inside its block, and does not move along with scrolling.

$(document).ready(function() { var pxar = 0; var n = $(".news-overflow").length; var pages = Math.floor(n / 3); var curPage = 0; $(".news-right").click(function() { if (curPage <= pages) { pxar -= 704; curPage++; $(".news-overflow").stop().animate({ "margin-left": pxar + "px" }, 1000); } }) $(".news-left").click(function() { if ((curPage - 1) >= 0) { pxar += 704; curPage--; $(".news-overflow").stop().animate({ "margin-left": pxar + "px" }, 1000); } }) }); 
 .news-table { display: block; width: 100%; height: 260px; background: #0e0f16; border-bottom: 4px solid #171823; margin-bottom: 40px; } .news-table-content { display: block; width: 1060px; margin: 0 auto; padding-top: 52px; position: relative; top: 8px; left: 35px; } .news-body { display: block; width: 98%; height: 150px; overflow: hidden; } .news-body img { display: inline-block; float: left; margin-right: 12px; width: 340px; } ul.slider-footer li { display: inline-block; } ul.slider-footer li .news-slider-descr { position: absolute; color: #fff; font-size: 14px; } ul.slider-footer li img { width: 340px; height: 129px; background-size: cover; } .news-left { display: block; position: absolute; top: 72px; left: -18px; cursor: pointer; width: 40px; height: 86px; background: #000; } .news-right { display: block; position: absolute; top: 72px; right: 56px; background: #000; cursor: pointer; width: 43px; height: 86px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="news-table-content"> <div class="news-body"> <div class="news-overflow"> <ul class="slider-footer"> <li class="slider-item"> <img src="http://i.imgur.com/LGckpST.jpg"> <div class="news-slider-descr"> Текст </div> </li> <li class="slider-item"> <img src="http://i.imgur.com/LGckpST.jpg"> <div class="news-slider-descr"> Текст </div> </li> <li class="slider-item"> <img src="http://i.imgur.com/LGckpST.jpg"> <div class="news-slider-descr"> Текст </div> </li> <li class="slider-item"> <img src="http://i.imgur.com/LGckpST.jpg"> </li> <li class="slider-item"> <img src="http://i.imgur.com/LGckpST.jpg"> </li> </ul> </div> </div> <div class="news-left"></div> <div class="news-right"></div> </div>

  • one
    I did not understand the phrase "so that when it scrolls, it remains inside its block, and does not move along with the scrolling." Text inside a block that moves. How can he stay in his block and not move? If you want, nevertheless, that the text should remain on the slides in its place and go with them - add the parent li position:relative; If not, please specify the question. - Ivan Pshenitsyn
  • Thank you) It was easy. - stoner

1 answer 1

Add

 position: relative;

parent (for text) <li> blocks.

The fact is that with position: absolute; (like your text blocks) the position of the element is calculated relative to the nearest parent with position:absolute or position:relative or relative to the body . Since the nearest parent with the specified properties is, if I'm not mistaken, .news-table-content then the text is positioned relative to it.