Problemas com slider ao reduzir o tamanho do browser

[Carlos Rocha]

Boas pessoal, estou encontrando dificuldades para achar uma adaptação ao meu código de slider.

Tudo funciona bem. Mas quando eu tento reduzir o tamanho do browser, a UL do Slider continuar com a mesma medida porque estou resgatando ela via JS.

Preciso de ajuda para converter em CSS.

 

CSS:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
* {    
	font-family: Montserrat;
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	transition: all 1s ease;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
:root {
	--widthContainer: 80vw;
  }
  
  ul {
	list-style: none;
  }
  
  div.slider {
	  position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	background: #000;
  }
  
  div.slider div.container {
	position: relative;
	width: var(--widthContainer);
	overflow: hidden;
  }
  
  div.slider div.container ul {
	  position: relative;
	display: inline-flex;
  }
  
  div.slider div.container ul li {
	position: relative;
	width: var(--widthContainer);
  }
  
  div.slider div.container ul li img{
	width: 100%;
  }
  
  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: 10px;
  }
  
  div.slider div.container button#front {
	  right: 10px;
  }
  
  div.slider div.container ul li span {
	  position: absolute;
	  display: flex;
	  font-size: 2.5vw;
	  top: 0;
	  left: 0;
	  color: #fff;
	  background: rgba(0,0,0, .3);
	  padding: 10px;
	  width: 100%;
  }		
  
  div.slider div.container ul li span:hover {
	  background: #999;
	  cursor:pointer;
  }
  
  .ulToRight {
	  left: calc(left - var(--widthContainer) );
  }
  
  .ulToLeft {
	  left: calc(left + var(--widthContainer));
  }

@media screen and (min-width: 0px) and (max-width:800px) {
  :root {
	--widthContainer: 100vw;
  }
}

HTML:

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

<div class="slider">
  <div class="container">
    <label>Pausado</label>		
	  <button id="back"><</button>
    <ul>
      <li class="item">
			  <span>F540 2 BAN PNEU 1.1 X 1.80 R$ 25.800</span>
        <img src ="https://www.hotplateprensas.com.br/slider/slider/F540 2 BAN PNEU 1.1 X 1.80 R$ 25.800.png">
      </li>
      <li class="item">
			  <span>F540 2 BAN PNEU 1.1 X 1.60 R$ 24.300</span>
        <img src ="https://www.hotplateprensas.com.br/slider/slider/F540 2 BAN PNEU 1.1 X 1.60 R$ 24.300.png">
      </li>
      <li class="item">
			  <span>F540 2 BAN PNEU 1.1 X 2.00 R$ 27.300</span>
        <img src ="https://www.hotplateprensas.com.br/slider/slider/F540 2 BAN PNEU 1.1 X 2.00 R$ 27.300.png">
      </li>
      <li class="item">
			  <span>F540 2 BAN PNEU 1.3 X 2.00 R$ 28.800</span>
        <img src ="https://www.hotplateprensas.com.br/slider/slider/F540 2 BAN PNEU 1.3 X 2.00 R$ 28.800.png">
      </li>
      <li class="item">
			  <span>F540 2 BAN PNEU 1.5 X 2.00 R$ 30.300</span>
        <img src ="https://www.hotplateprensas.com.br/slider/slider/F540 2 BAN PNEU 1.5 X 2.00 R$ 30.300.png">
      </li>
    </ul>	   
	  <button id="front">></button>
  </div>
 </div>

JS:

$(document).ready(function(){
	  
	container = $("div.slider div.container");
	containerWidth = $(container).width();
	ul = $("div.slider div.container ul");
	left = $(ul).offset().left;
	lis = $("div.slider div.container ul li");
	label = $(container).find("label");
	back = $(container).find("button#back");
	front = $(container).find("button#front");	

	back.on("click", function() {
				
		label.css("opacity", 0);
				
		//ul.addClass("ulToLeft").removeClass("ulToRight");

		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);
				
		//ul.addClass("ulToRight").removeClass("ulToLeft");
		
		left -= containerWidth;
		
		if ( Math.round(left) <= -((lis.length - 1) * 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);
	});
	
	
})

Pode ser testado em https://codepen.io/carcleo/pen/yLVOxMv

O problema é que não encontrando uma forma de, ao reduzir manualmente o tamanho da janela (navegador),  fazer com que o tamanho da UL acompanhe os 80% da VW.

Ele acaba mantendo os 80 da vw da primeira vez que a janela é aberta.

Fiz uma tentativa com addClass do JQUERY mas não deu muito certo!

Editado Fevereiro 10, 2021 por Carlos Rocha