Jump to content
Fórum Script Brasil
  • 0

como deixo responsivo um slide


adrsublimacao

Question

boa noite segue meu codigo queria uma ajuda de deixar rsponsivo esse slide

 

 <style>
           .div-slider{
width: auto;
height: 400px;
text-align: center;
}
.slides-front {
    padding: 0;
    width: 980px;
    height: 370px;
    display: block;
    margin: auto;
    position: relative;
}

.slides-front * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides-front input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 980px;
    height: 370px;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out 0.1s;
}

.slide img {
    width: 100%;
    height: 100%;
}

.nav label {
    width: 150px;
    height: 100%;
    display: none;
    position: absolute;
    opacity: 0;
    z-index: 9;
    cursor: pointer;
    transition: opacity .2s;
    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out 0.1s;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
    width: 100%;
    bottom: 9px;
    height: 11px;
    display: block;
    position: relative;
    text-align: center;
}

.nav-dots .nav-dot {
    top: 375px;
    width: 11px;
    height: 11px;
    margin: 0 4px;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
}
input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3, {
    background: rgba(0, 0, 0, 0.8);
}
            
          </style>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-slider">
  <ul class="slides-front">
    <input type="radio" name="radio-btn" id="img-1" checked="">
    <li class="slide-container">
       <div class="slide">
      
        <div class="mg-b-10" align="center"><a href="#" class="view_data" id="<?php print $dadosbanner->link_1;?>"><img src="img/banner/<?php echo $dadosbanner->img;?>" class="img-fluid" /></a></div>
    
       </div>
       <div class="nav">
         <label for="img-3" class="prev">‹</label>
         <label for="img-2" class="next">›</label>
       </div>
    </li>

    <input type="radio" name="radio-btn" id="img-2">
    <li class="slide-container">
        <div class="slide ">
          <div class="mg-b-10" align="center"><a href="#" class="view_data" id="<?php print $dadosbanner2->link_2;?>"><img src="img/banner/<?php echo $dadosbanner2->img2;?>" class="img-fluid" /></a></div>
        </div>
    <div class="nav">
      <label for="img-1" class="prev">‹</label>
      <label for="img-3" class="next">›</label>
    </div>
    </li>

    <input type="radio" name="radio-btn" id="img-3">
    <li class="slide-container">
        <div class="slide">
         <div class="mg-b-10" align="center"><a href="#" class="view_data" id="<?php print $dadosbanner3->link_3;?>"><img src="img/banner/<?php echo $dadosbanner3->img3;?>" class="img-fluid" /></a></div>
        </div>
    <div class="nav">
      <label for="img-2" class="prev">‹</label>
      <label for="img-1" class="next">›</label>
    </div>
    </li>

    
  </ul>
</div>

 

 <script>
            $(document).ready(function(){
   
   var slids = $(".div-slider [type=radio]"); // busca os radios na div
   var slids_len = slids.length; // conta o número de radios
   var intervalo = 2; // intervalo em segundos
   
   function rodar(){
      var slids_ativo = $(".div-slider [type=radio]:checked")
      .attr("id")
      .match(/\d+/)[0]; // pega o valor numérico do id do radio checado

      if(slids_ativo == slids_len) slids_ativo = 0; // se estiver no último slide, volta pro primeiro

      slids.eq(slids_ativo).prop("checked", true); // checa o radio da vez
   }
   
   var tempo = setInterval(rodar, intervalo*1000); // inicia o temporizador
   
   $(".div-slider").hover(
      function(){ // função quando entra o mouse
         clearInterval(tempo); // cancela o temporizador
      },
      function(){ // função quando retira o mouse
         tempo = setInterval(rodar, intervalo*1000); // reinicia o temporizador
      }
   );
   
});
          </script>         

Edited by adrsublimacao
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Estou começando a estudar. A primeira correção é $dadosbanner3->link3 e
$dadosbanner3->img3, o correto é $dadosbanner->link3 e $dadosbanner->img3.

A segunda correção é $dadosbanner2->img2 e
$dadosbanner2->link_2 para $dadosbanner->img2 e $dadosbanner->img2.

A terceira correção: você precisa tirar a vírgula depois de label#img-dot-3.

Olha, os únicos erros que eu encontrei foram esses. O seu código é responsivo, tanto no notebook bem como no celular.

Para testar o seu código, copiei três imagens na internet e salvei na pasta /img/banner como teste.jpg, teste1.jpg e teste2.jpg, e criei uma classe chamada dadosbanner( ), assim:

<?php
class dadosbanner {
    public $img;
    public $img2;
    public $img3;
    public $link_1;
    public $link_2;
    public $link_3;
    public function getImg(){return $this->img;}
    public function getImg2(){return $this->img2;}
    public function getImg3(){return $this->img3;}
    public function getLink1(){return $this->link_1;}
    public function getLink2(){return $this->link_2;}
    public function getLink3(){return $this->link_3;}}
$dadosbanner=new dadosbanner();
$dadosbanner->img="teste.jpg";
$dadosbanner->img2="teste2.jpg";
$dadosbanner->img3="teste3.jpg";
$dadosbanner->link_1="uol.com.br";
$dadosbanner->link_2="facebook.com";
$dadosbanner->link_3="nyt.com";
?>
<style>
.div-slider{width:auto;height: 400px;text-align: center;}
.slides-front {padding: 0;width: 980px;height: 370px;display: block;margin: auto;
    position: relative;}
.slides-front * {user-select: none;-ms-user-select: none;
    -moz-user-select: none;-khtml-user-select: none;
    -webkit-user-select: none;-webkit-touch-callout: none;}
.slides-front input { display: none; }
.slide-container { display: block; }
.slide {top: 0;opacity: 0;width: 980px;height: 370px;
    display: block;position: absolute;
    transform: scale(0);
    transition: all .7s ease-in-out 0.1s;}
.slide img {width: 100%;height: 100%;}
.nav label {width: 150px;height: 100%;display: none;
    position: absolute;opacity: 0;z-index: 9;cursor: pointer;
    transition: opacity .2s;color: #FFF;font-size: 156pt;
    text-align: center;line-height: 380px;font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);}
.slide:hover + .nav label { opacity: 0.5; }
.nav label:hover { opacity: 1; }
.nav .next { right: 0; }
input:checked + .slide-container  .slide {
    opacity: 1;transform: scale(1);
    transition: opacity 1s ease-in-out 0.1s;}
input:checked + .slide-container .nav label { display: block; }
.nav-dots {width: 100%;bottom: 9px;height: 11px;display: block;
    position: relative;text-align: center;}
.nav-dots .nav-dot {top: 375px;width: 11px;
    height: 11px;margin: 0 4px;position: relative;
    border-radius: 100%;display: inline-block;
    background-color: rgba(0, 0, 0, 0.6);}
.nav-dots .nav-dot:hover {
    cursor: pointer;background-color: rgba(0, 0, 0, 0.8);}
input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3 {
    background: rgba(0, 0, 0, 0.8);}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-slider">
<ul class="slides-front">
<input type="radio" name="radio-btn" id="img-1" checked="">
<li class="slide-container">
<div class="slide">  
<div class="mg-b-10" align="center"><a href="#" class="view_data" id="<?php print $dadosbanner->link_1;?>"><img src="img/banner/<?php echo $dadosbanner->img;?>" class="img-fluid" /></a></div>
</div>
<div class="nav">
<label for="img-3" class="prev"></label>
<label for="img-2" class="next"></label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-2">
<li class="slide-container">
<div class="slide ">
<div class="mg-b-10" align="center"><a href="#" class="view_data" id="<?php print $dadosbanner->link_2;?>"><img src="img/banner/<?php echo $dadosbanner->img2;?>" class="img-fluid" /></a></div>
</div>
<div class="nav">
<label for="img-1" class="prev"></label>
<label for="img-3" class="next"></label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-3">
<li class="slide-container">
<div class="slide">
<div class="mg-b-10" align="center"><a href="#" class="view_data" id="<?php print $dadosbanner->link_3;?>"><img src="img/banner/<?php echo $dadosbanner->img3;?>" class="img-fluid" /></a></div>
</div>
<div class="nav">
<label for="img-2" class="prev"></label>
<label for="img-1" class="next"></label>
</div>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
   var slids = $(".div-slider [type=radio]"); // busca os radios na div
   var slids_len = slids.length; // conta o número de radios
   var intervalo = 2; // intervalo em segundos
   function rodar(){
      var slids_ativo = $(".div-slider [type=radio]:checked")
      .attr("id")
      .match(/\d+/)[0]; // pega o valor numérico do id do radio checado
      if(slids_ativo == slids_len) slids_ativo = 0; // se estiver no último slide, volta pro primeiro
      slids.eq(slids_ativo).prop("checked", true); // checa o radio da vez
   }
   var tempo = setInterval(rodar, intervalo*1000); // inicia o temporizador
   $(".div-slider").hover(
      function(){ // função quando entra o mouse
         clearInterval(tempo); // cancela o temporizador
      },
      function(){ // função quando retira o mouse
         tempo = setInterval(rodar, intervalo*1000); // reinicia o temporizador
      }
   );
});
</script>

 

Edited by Frank K Hosaka
Link to comment
Share on other sites

  • 0
27 minutos atrás, Frank K Hosaka disse:

Estou começando a estudar. A primeira correção é $dadosbanner3->link3 e
$dadosbanner3->img3, o correto é $dadosbanner->link3 e $dadosbanner->img3.

A segunda correção é $dadosbanner2->img2 e
$dadosbanner2->link_2 para $dadosbanner->img2 e $dadosbanner->img2.

Não entendi nada o q isso vai mudar no código

Link to comment
Share on other sites

  • 0
21 minutos atrás, adrsublimacao disse:

Não entendi nada o q isso vai mudar no código

Você pode mostrar como você definiu as variáveis $dadosbanner, $dadosbanner2 e $dadosbanner3?

No meu caso eu criei uma classe chamada dadosbanner conforme a listagem mais acima, e $dadosbanner passou a ser uma instância daquela classe. Outra coisa errada que eu vi no código é o <a href="#">, ou seja, os slides não estão amarrados com os links.

Edited by Frank K Hosaka
Link to comment
Share on other sites

  • 0
7 horas atrás, Frank K Hosaka disse:

Você pode mostrar como você definiu as variáveis $dadosbanner, $dadosbanner2 e $dadosbanner3?

No meu caso eu criei uma classe chamada dadosbanner conforme a listagem mais acima, e $dadosbanner passou a ser uma instância daquela classe. Outra coisa errada que eu vi no código é o <a href="#">, ou seja, os slides não estão amarrados com os links.

Na verdade meu problema não tá nisso queria uma dica no css do código pra tornar ele responsivo o slide em si tá funcionando pra mim só não tá responsivo

Link to comment
Share on other sites

  • 0
Em 02/04/2023 em 17:21, adrsublimacao disse:

Na verdade meu problema não tá nisso queria uma dica no css do código pra tornar ele responsivo o slide em si tá funcionando pra mim só não tá responsivo

Ah, desculpe, entendi tudo errado. Acabei de fazer a pesquisa no Google e aprendi que responsivo é adequar o código HTML que seja legível na tela de um PC, de um tablete, de um smartphone. Eu acabei atrapalhando você, peço desculpas. Por enquanto, só sei usar o CSS estático. O Bootstrap tem recursos bem avançados que calculam a dimensão da tela do cliente e usa o cálculo para melhor apresentar a informação de acordo com a dimensão. Eu ainda não cheguei lá. No momento, só estou montando um projeto que se adapte na tela do celular, mas não estou conseguindo.

 

 

Edited by Frank K Hosaka
Link to comment
Share on other sites

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
      152.1k
    • Total Posts
      651.8k
×
×
  • Create New...