I can not figure out the slider, how to add text to the slide?

Question

css

Hello. I don't claim to be a master of html. I'm making a simple html page and added the simplest slider to it. Everything works great, but I can't add a text layer to each slide (on top of the picture). I would be very grateful for help. I understand that the question is ala school ...

Html:

<div class="sl_ctr">
<div class="sldr">  
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
</div>
<div class="prv_b"></div>
<div class="nxt_b"></div>
</div>

CSS:

.sl_ctr{
    position:relative;
    width:1200px;
    height:400px;
    overflow:hidden;
    }
    .sldr{
    position:relative;
   
    }
    .sldr img{
    float:left;
    }
    
    .prv_b, .nxt_b{
    position:absolute;
    top:350px;
    display:block;
    width:35px;
    height:35px;
    cursor:pointer;
    }
    .prv_b:hover, .nxt_b:hover{opacity: .6;}
    .prv_b{
    left:5px;
    background:url(img/left.png) no-repeat;
    }
    .nxt_b{
    right:5px;
    background:url(img/right.png) no-repeat;
    }

javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function() {
var sldr = $('.sldr'),
sldrContent = sldr.html(),
slideWidth = $('.sl_ctr').outerWidth(),
slideCount = $('.sldr img').length,
prv_b = $('.prv_b'),
nxt_b = $('.nxt_b'),
sldrInterval = 3300,
animateTime = 1000,
course = 1,
margin = - slideWidth;
$('.sldr img:last').clone().prependTo('.sldr');$('.sldr img').eq(1).clone().appendTo('.sldr');$('.sldr').css('margin-left',-slideWidth);function nxt_bSlide(){interval=window.setInterval(animate,sldrInterval)}function animate(){if(margin==-slideCount*slideWidth-slideWidth){sldr.css({'marginLeft':-slideWidth});margin=-slideWidth*2}else if(margin==0&&course==-1){sldr.css({'marginLeft':-slideWidth*slideCount});margin=-slideWidth*slideCount+slideWidth}else{margin=margin-slideWidth*(course)}sldr.animate({'marginLeft':margin},animateTime)}function sldrStop(){window.clearInterval(interval)}prv_b.click(function(){if(sldr.is(':animated')){return false}var course2=course;course=-1;animate();course=course2});nxt_b.click(function(){if(sldr.is(':animated')){return false}var course2=course;course=1;animate();course=course2});sldr.add(nxt_b).add(prv_b).hover(function(){sldrStop()},nxt_bSlide);nxt_bSlide()});
</script>

Answer 1

Here's an example, wrap the pictures in a div. Add text and the image itself, then add absolute positioning for the text