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