Hot to fix problem with backgound color for slider?-CodePudding

I use a simple slider for the text, but I can't make the background black. How to do it? I use a simple slider for the text, but I can't make the background black. How to do it?

var text_slide_cur=0;
function showtext_slide(){
    $('#text_slide' (text_slide_cur 1)).css({opacity: 0}).animate({opacity: 1.0,left: "0px"}, 1000);
    setTimeout(hidetext_slide, 1000);
}
function hidetext_slide(){
    $('#text_slide' (text_slide_cur 1)).css({opacity: 1}).animate({opacity: 0,left: "-0px"}, 1000,function(){showtext_slide();});
    text_slide_cur=(text_slide_cur 1)%5;
}
 $(window).on('load', function() {
    showtext_slide();
})

ul#textSlider li {
    position: absolute;
    left: 0px;
    opacity:0;
    color:red;

}

div {
  background-color: black; 
  display: block;
      position: relative;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div>

<ul id='textSlider' style=' margin:0px; padding:0px;'>
<li id="text_slide1">Block №1</li>
<li id="text_slide2">Block №2</li>
<li id="text_slide3">Block №3</li>
<li id="text_slide4">Block №4</li>
<li id="text_slide5">Block №5</li>
</ul>

</div>

CodePudding user response：

THe probem is that the li elements are positioned absolutely. This means that they don't contribute any dimensions to the ul element, and hence contribute nothing to the enclosing div element.

You could put the background on each li:

var text_slide_cur = 0;

function showtext_slide() {
  $('#text_slide'   (text_slide_cur   1)).css({
    opacity: 0
  }).animate({
    opacity: 1.0,
    left: "0px"
  }, 1000);
  setTimeout(hidetext_slide, 1000);
}

function hidetext_slide() {
  $('#text_slide'   (text_slide_cur   1)).css({
    opacity: 1
  }).animate({
    opacity: 0,
    left: "-0px"
  }, 1000, function() {
    showtext_slide();
  });
  text_slide_cur = (text_slide_cur   1) % 5;
}
$(window).on('load', function() {
  showtext_slide();
})

ul#textSlider li {
  position: absolute;
  left: 0px;
  opacity: 0;
  color: red;
  background-color: black;
}

div {
  background-color: black;
  display: block;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div>

  <ul id='textSlider' style=' margin:0px; padding:0px;'>
    <li id="text_slide1">Block №1</li>
    <li id="text_slide2">Block №2</li>
    <li id="text_slide3">Block №3</li>
    <li id="text_slide4">Block №4</li>
    <li id="text_slide5">Block №5</li>
  </ul>

</div>

CodePudding user response：

enter code here

var text_slide_cur=0;
function showtext_slide(){
    $('#text_slide' (text_slide_cur 1)).css({opacity: 0}).animate({opacity: 1.0,left: "0px"}, 1000);
      
    var h = $('#text_slide' (text_slide_cur 1)).outerHeight();
    $("div").css('height', h   "px");
    setTimeout(hidetext_slide, 10000);
   
      
}
function hidetext_slide(){
    $('#text_slide' (text_slide_cur 1)).css({opacity: 1}).animate({opacity: 0,left: "-0px"}, 1000,function(){showtext_slide();});
    text_slide_cur=(text_slide_cur 1)%5;
}
 $(window).on('load', function() {
    showtext_slide();
})

ul#textSlider li {
    position: absolute;
    left: 0px;
    opacity:0;
    color:red;

}

a {
color: white;
}

div {
  background-color: black; 
  display: block;
      position: relative;
  border: 1px solid black;
  height: 90px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div>

<ul id='textSlider' style=' margin:0px; padding:0px;'>
<li id="text_slide1"><a href="http://someurl">"Block №1"</a></li>
<li id="text_slide2">Block №2</li>
<li id="text_slide3">Block №3</li>
<li id="text_slide4">Bloc k№4</li>
<li id="text_slide5">Block №5<br>Block №5Block №5Block №5<br>Block №5Block №5</li>
</ul>

</div>