Estou criando por conta própria um slider mais para aprimorar os conhecimentos de JS, CSS mesmo. Mas estou tendo um problema.
A ideia é fazer um slder que à medida em que se vai diminuindo e aumentando o tamanho do navegador, (tipo, clicando com o mouse lá em cima perto do X de fechar o navegador) vai reduzindo e aumentando o tamanho dele.
De fato isso ocorre com o container, com a ul e com a li, mas não consigo fazer com que a imagem acompanhe o redimencionamento.
$(document).ready(function(){
left = 0;
container = $("div.slider div.container");
containerWidth = $(container).width();
ul = $(container).find("ul");
lis = $(ul).find("li");
label = $(container).find("label");
back = $(container).find("button#back");
front = $(container).find("button#front");
back.on("click", function() {
label.css("opacity", 0);
left += containerWidth;
if ( Math.round(left) >= containerWidth ) {
left = ( ( lis.length - 1 ) * -containerWidth ) + container.offset().left;
}
ul.offset({left:Math.round(left)});
})
front.on("click", function() {
label.css("opacity", 0);
left -= containerWidth;
if ( Math.round(left) <= -(lis.length * containerWidth) ) {
left = container.offset().left;
}
ul.offset({left:Math.round(left)});
})
front.trigger( "click" );
function intervalo () {
front.trigger( "click" );
}
var interval = setInterval(intervalo,4000);
$(container).on("mouseover", function(){
clearInterval(interval);
label.css("opacity", 1);
}).mouseout(function(){
label.css("opacity", 0);
interval = setInterval(intervalo,4000);
});
})
:root {
--widthContainer: 100vw;
}
* {
transition: all 1s ease;
}
div.slider {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: #000;
width: var(--widthContainer);
}
div.slider div.container {
position: relative;
overflow: hidden;
}
div.slider div.container ul {
position: relative;
display: flex;
list-style: none !important;
}
div.slider div.container ul li {
position: relative;
}
div.slider div.container ul li img{
width: var(--widthContainer)
}
div.slider div.container label {
position: absolute;
opacity: 0;
width: 100px;
height: 50px;
left: calc( 50% - 50px );
top: calc( 50% - 25px );
z-index:2;
color: #fff;
}
div.slider div.container button {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
top: calc( 50% - 25px );
background: none;
border-radius: 50%;
z-index:2;
color: #fff;
font-size: 2em;
}
div.slider div.container button:hover {
cursor: pointer;
background: #999;
}
div.slider div.container button#back {
left: 2%;
}
div.slider div.container button#front {
right: 2%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
<div class="container">
<label>Pausado</label>
<button id="back"><</button>
<ul>
<li>
<img src="https://source.unsplash.com/49b9l_29ceA/1600x900">
</li>";
<li>
<img src="https://source.unsplash.com/nKAglN6HBH8/1600x900">
</li>";
<li>
<img src="https://source.unsplash.com/E9ZwWcMGzj8/1600x900">
</li>";
</ul>
<button id="front">></button>
</div>
</div>
Preciso entender o que eu fiz de errado para ocorrer esse problema da imagem não acomanhar o redimencionamenro do container e da ul e da li que a abriga.
Obs.: para fazer um teste basta trocar o valor da variável widthContainer no incio do css