<scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js"integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script><divclass="slider"><divclass="container"><label>Pausado</label><buttonid="back"><</button><ul><liclass="item"><span>F540 2 BAN PNEU 1.1 X 1.80 R$ 25.800</span><imgsrc="https://www.hotplateprensas.com.br/slider/slider/F540 2 BAN PNEU 1.1 X 1.80 R$ 25.800.png"></li><liclass="item"><span>F540 2 BAN PNEU 1.1 X 1.60 R$ 24.300</span><imgsrc="https://www.hotplateprensas.com.br/slider/slider/F540 2 BAN PNEU 1.1 X 1.60 R$ 24.300.png"></li><liclass="item"><span>F540 2 BAN PNEU 1.1 X 2.00 R$ 27.300</span><imgsrc="https://www.hotplateprensas.com.br/slider/slider/F540 2 BAN PNEU 1.1 X 2.00 R$ 27.300.png"></li><liclass="item"><span>F540 2 BAN PNEU 1.3 X 2.00 R$ 28.800</span><imgsrc="https://www.hotplateprensas.com.br/slider/slider/F540 2 BAN PNEU 1.3 X 2.00 R$ 28.800.png"></li><liclass="item"><span>F540 2 BAN PNEU 1.5 X 2.00 R$ 30.300</span><imgsrc="https://www.hotplateprensas.com.br/slider/slider/F540 2 BAN PNEU 1.5 X 2.00 R$ 30.300.png"></li></ul><buttonid="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!
Question
Carlos Rocha 0
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:
JS:
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 RochaLink to post
Share on other sites
0 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.