1

nao estou conseguindo deixar esse carousel fluido, como na imagem abaixo a div carousel ul nao esta pegando 100% da div sub-box que por padrao tem 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();
 }

na verdade a #carousel ul esta pegando 100% dos meus 900px só que tem alguma coisa puxando ela pra esquerda, nao consigo identificar, coloquei margin: 0% 0% 0% 15.77777777777778%;/*margin: 0px 0px 0px 142px; 142/900 */ deu certo, mais quando eu vou diminuindo a tela, da o mesmo efeito da imagem, a div #carousel ul volta a ser puxada para esquerda tentei colocar assim

#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
}

e assim

#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
}

nenhum jeito funcionou

se alguem tiver alguma soluçao que a div .destaque fique fluida dentro de 900px tambem ajuda

2
  • Coloca o CSS completo para que possamos reproduzir o problema.
    – Sam
    Commented 11/11/2018 às 15:23
  • @Sam opa, blz? ta aqui o problema no jsfiddle jsfiddle.net/moya2018/6wyznr01/15
    – goio
    Commented 11/11/2018 às 20:11

1 Resposta 1

2

O problema é que o código está puxando a ul para a esquerda deixando o espaço vazio ao lado devido a largura da ul ser a mesma da div pai.

O que você tem que fazer é aumentar a largura da ul para compensar o left negativo. Coloque width: 139.4% no estilo #carousel ul que irá compensar o left negativo que está aplicando na animação:

$(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-->

4
  • realmente a ul completou a div, so que sempre fica uma div li destaque a esquerda, ou seja a ul completou toda a largura da div #carousel ul mais sempre um li .destaque se "esconde" ficando o espaço vazio prntscr.com/lh58tl
    – goio
    Commented 11/11/2018 às 23:24
  • deu certo alterando essa var left_value = item_width * (-1); para left_value = item_width * (-0);
    – goio
    Commented 11/11/2018 às 23:36
  • agora, para deixar a li .destaque fluido vou ter que fazer com media queries, ou tem algum jeito da largura ficar fixa com porcentagem e se adaptando para as telas automaticamente, porque vou exibir 25 li .destaque nesse carousel, e conforme for aumentado elas, a largura em porcentagem vai diminuir
    – goio
    Commented 11/11/2018 às 23:41
  • 1
    Cara, vou dar uma analisada aqui....
    – Sam
    Commented 11/11/2018 às 23:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .