Jump to content
Fórum Script Brasil
  • 0

Problemas com slider ao reduzir o tamanho do browser


Question

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:[email protected]&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!

Edited by Carlos Rocha
Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      148955
    • Total Posts
      645010
×
×
  • Create New...