Div father of the Carousel is not in the center

Asked

Viewed 54 times

1

I am unable to leave this fluid Carousel, as in the image below the div carousel ul not picking up 100% of the div sub-box which by default has 900px

inserir a descrição da imagem aqui

HTML

<div class="box">
    <div class="sub-box">
        <h1>
            PRINCIPAIS
            <div class="b-slide">
                <span id="prev"><i class="fas fa-angle-double-left"></i></span>
                <span id="next"><i class="fas fa-angle-double-right"></i></span>
            </div>
        </h1>

        <div id="carousel" style="overflow:hidden;">
            <ul>
                <li><a href=""><div class="destaque">1</div></a></li>
                <li><a href=""><div class="destaque">2</div></a></li>
                <li><a href=""><div class="destaque">3</div></a></li>
                <li><a href=""><div class="destaque">4</div></a></li>
                <li><a href=""><div class="destaque">5</div></a></li>
            </ul>
        </div>
    </div><!--sub-box-->
</div><!--box-->

CSS

div{width 100%;}
.box{
   float: left;
   padding: 01.88888888888889% 01.88888888888889% 0% 01.88888888888889%;
   /*padding: 17px 17px 0px 17px;*/
}

.box:first-child{margin: 0%;}
.sub-box{
   float: left;
   padding: 0% 0% 01.88888888888889% 0%;
   border-bottom: 1px solid #e1e1e1;
}
.sub-box:first-child{display: inline-block;margin: 0%;}
#carousel ul{
   position: relative;
   display: flex;
   margin: 0%;
   padding: 0%;
   float: left;
   width: 100%;
   max-height: 260px;
   height: auto;
   background-color: green
}
#carousel ul li{
   margin: 0% 01.5% 0% 0%;
   width: 16.1%;
   /*width: 161px;  161/900*/
   background-color: orange
}
#carousel ul li .destaque{
   float: left;
   width: 100%;
   height: 260px;
   height: 250px;
   border: 1px solid transparent;
   border-radius: 3px;
}
#carousel ul li:last-child{margin: 0%;background-color: gray}

JQUERY

$(document).ready(function(){

   var speed = 25000;
   var run = setInterval('rotate()',speed);

   var item_width = $('#carousel li').outerWidth();
   var left_value = item_width * (-1);

   $('#carousel li:first').before($('#carousel li:last'));

   $('#carousel ul').css({'left' : left_value});

   $("#prev").click(function(){

      var left_intend = parseInt($('#carousel ul').css('left')) + item_width;
      $('#carousel ul').animate({'left':left_intend},200, function(){

          $('#carousel li:first').before($('#carousel li:last'));
          $('#carousel ul').css({'left' : left_value});

      });

      clearInterval(run);
      run = setInterval('rotate()',speed);

   });

   $("#next").click(function(){

      var left_intend = parseInt($('#carousel ul').css('left')) - item_width;
      $('#carousel ul').animate({'left':left_intend},200, function(){

          $('#carousel li:last').after($('#carousel li:first'));
          $('#carousel ul').css({'left' : left_value});

      });

      clearInterval(run);
      run = setInterval('rotate()',speed);

   });

   $('#carousel').hover(
      function(){
        clearInterval(run);
        disableScroll();
      },
      function(){
        clearInterval(run);
        run = setInterval('rotate()',speed);
        enableScroll();
    });

});

var keys = {37:1, 38:1, 39:1, 40:1};

function preventDefault(e){
   e = e || window.event;
   if(e.preventDefault)
      e.preventDefault();
      e.returnValue = false;
   }
   function preventDefaultForScrollKeys(e){
      if(keys[e.keyCode]){
      preventDefault(e);
      return false;
   }
 }

 function disableScroll(){
    window.onwheel = preventDefault;
    window.ontouchmove = preventDefault;
    document.onkeydown = preventDefaultForScrollKeys;
 }

 function enableScroll(){
   window.onwheel = null;
   window.ontouchmove = null;
   document.onkeydown = null;
 }
 function rotate(){
   $('#next').click();
 }

in fact the #carousel ul this picking up 100% of my 900px only that there’s something pulling her left, I can’t identify, I put margin: 0% 0% 0% 15.77777777777778%;/*margin: 0px 0px 0px 142px; 142/900 */ worked out, more when I’m decreasing the screen, the same effect of the image, the div #carousel ul back to be pulled left tried to put so

#carousel ul{
   position: relative;

   display: flex;
   align-items: center;

   padding: 0px;
   float: left;
   width: 100%;
   height: 260px;
   max-height: 260px;
   height: auto;
   background-color: green
}

and so 

#carousel ul{

   position: absolute;
   top: 35px;
   left: 50%;
   transform: translate(-50%,0px);

   padding: 0px;
   float: left;
   width: 100%;
   height: 260px;
   max-height: 260px;
   height: auto;
   background-color: green
}

no way worked

if anyone has any hiccups that div . highlight stay fluid within 900px also helps

css

  • Puts the full CSS so we can reproduce the problem.

  • @Sam opa, blz? ta aqui o problema no jsfiddle https://jsfiddle.net/moya2018/6wyznr01/15/

1 answer

2


The problem is that the code is pulling the ul to the left leaving the empty space on the side due to the width of the ul be the same as the father’s.

What you have to do is increase the width of the ul to compensate for the left negative. Place width: 139.4% in the style #carousel ul that will compensate for the negative left you are applying in the animation:

$(document).ready(function(){
	var speed = 5000;
	var run = setInterval('rotate()',speed);

	var item_width = $('#carousel li').outerWidth();
	var left_value = item_width * (-1);

	$('#carousel li:first').before($('#carousel li:last'));
   
	$('#carousel ul').css({'left' : left_value});

	$("#prev").click(function(){
		var left_intend = parseInt($('#carousel ul').css('l   eft')) + item_width;
		$('#carousel ul').animate({'left':left_intend},200, function(){
			$('#carousel li:first').before($('#carousel li:last'));
			$('#carousel ul').css({'left' : left_value});
		});
		clearInterval(run);
		run = setInterval('rotate()',speed);
	});
	$("#next").click(function(){
		var left_intend = parseInt($('#carousel ul').css('left')) - item_width;
		$('#carousel ul').animate({'left':left_intend},200, function(){
			$('#carousel li:last').after($('#carousel li:first'));
			$('#carousel ul').css({'left' : left_value});
		});
		clearInterval(run);
		run = setInterval('rotate()',speed);
	});

	$('#carousel').hover(
	function(){
		clearInterval(run);
		disableScroll();
	},
	function(){
		clearInterval(run);
		run = setInterval('rotate()',speed);
		enableScroll();
	});
});

var keys = {37:1, 38:1, 39:1, 40:1};

function preventDefault(e){
	e = e || window.event;
	if(e.preventDefault)
		e.preventDefault();
	e.returnValue = false;
}
function preventDefaultForScrollKeys(e){
	if(keys[e.keyCode]){
		preventDefault(e);
		return false;
	}
}
function disableScroll(){
	window.onwheel = preventDefault;
	window.ontouchmove = preventDefault;
	document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll(){
	window.onwheel = null;
	window.ontouchmove = null;
	document.onkeydown = null;
}
function rotate(){
	$('#next').click();
}
*{margin: 0px;padding: 0px;}
*,*:before, *:after{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
ul{width: 100%;}
ul, li{
	list-style: none;
	margin: 0%;
	padding: 0%;
}
.b-slide{float: right;max-width: 150px;width: auto;height: 25px;}
.b-slide span{float: left;width: 35px;height: 25px;line-height: 27px;text-align: center;cursor: pointer;color: white;background-color: #4CAE50;}
.b-slide #prev{border-right: 1px solid white;-webkit-border-radius: 4px 0 0 4px;-moz-border-radius: 4px 0 0 4px;border-radius: 4px 0 0 4px;}
.b-slide #next{-webkit-border-radius: 0 4px 4px 0;-moz-border-radius: 0 4px 4px 0;border-radius: 0 4px 4px 0;}
.b-slide span:hover{background-color: black;}

div{max-width: 900px;width: 100%;}

#wrapper{
	margin: 0 auto;
	width: 95%;
	background-color: #fff;
	box-shadow: 0 0 25px #000;
}
#top{
	position: relative;
	height: 55px;
	background-color: #ccc;
}
#container{
	float: left;
  width: 100%;
	padding: 0% 0% 01.88888888888889% 0%;
}
.box{
	float: left;
	padding: 01.88888888888889% 01.88888888888889% 0% 01.88888888888889%;
	/*padding: 17px 17px 0px 17px;*/
}
.box:first-child{margin: 0%;}
.sub-box{
	float: left;
	padding: 0% 0% 01.88888888888889% 0%;
	border-bottom: 1px solid #e1e1e1;
}
.sub-box:first-child{display: inline-block;margin: 0%;}
#sub-box{
	position: relative;
	width: 100%;/*a ul caousel tem que pegar 100 dessa div, ou seja 900px, tem que ser em porcentagem*/
	max-height: 330px;
	height: auto;
  background-color: pink
}

#carousel ul{
	position: relative;
	display: flex;
	align-items: center;
	padding: 0px;
	width: 139.4%;
	max-height: 260px;
	height: 260px;

	background-color: green
}
#carousel ul li{
	margin: 0% 01.5% 0% 0%;
	width: 16.1%;
	/*width: 161px;*/
	background-color: orange
}
#carousel ul li .destaque{
	float: left;
	width: 100%;
	height: 260px;
	height: 250px;
	border: 1px solid transparent;
	border-radius: 3px;
}
#carousel ul li:last-child{margin: 0%;background-color: gray}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
   <div id="top"></div>
   
   <div id="container">
     
     <div class="box">
     
       <div id="sub-box" class="sub-box">
         
         <h1>PRINCIPAIS
					<div class="b-slide">
						<span id="prev"><i class="fas fa-angle-double-left"></i></span>
						<span id="next"><i class="fas fa-angle-double-right"></i></span>
					</div>
				</h1>
        
        <div id="carousel" style="overflow:hidden;">
					<ul>
						<li><a href=""><div class="destaque">1</div></a></li>
						<li><a href=""><div class="destaque">2</div></a></li>
						<li><a href=""><div class="destaque">3</div></a></li>
						<li><a href=""><div class="destaque">4</div></a></li>
						<li><a href=""><div class="destaque">5</div></a></li>
					</ul>
				</div>
         
       </div><!--sub-box-->
       
     </div><!--box-->
     
   </div><!--container-->
   <div style="clear:both;"></div>
</div><!--wrapper-->

  • really the ul completed the div, only that always remains a div li destaque the left, ie the ul completed the entire width of the div #carousel ul more always a li .destaque "hide" by leaving empty space http://prntscr.com/lh58tl

  • worked out by changing this var left_value = item_width * (-1); for left_value = item_width * (-0);

  • now, to leave the li .destaque fluid I’ll have to do with media queries, or there is some way the width stay fixed with percentage and adapting to the screens automatically, because I will display 25 li .destaque in this field, and as they are increased, the width in percentage will decrease

  • 1

    Dude, I’m gonna take a look here....

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.