Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

carcleo

Position absolute em slideShow não funciona direito após migração

Recommended Posts

carcleo

Tenho um slideShow funcionando normalmente em uma página, http://hotplateprensas.com.br/estilos/slide.php, só para ele.

Quando migrei para essa página. http://hotplateprensas.com.br/estilos/slide.php,


O slide funciona, mas o que vem abaixo dele não aparece.

HTML

      <div class="slideShow">
        <div class="boxSlide">
           <img src="_imgs/_slideShow/1.png" />
           <img src="_imgs/_slideShow/2.png" />
           <img src="_imgs/_slideShow/3.png" />
           <div class="anterior">
              <span class="setaSpan"><</span>
              <span class="boxSpan"></span>
           </div>
           <div class="proximo">
              <span class="setaSpan">></span>
              <span class="boxSpan"></span>
            </div>
        </div>
        <div class="contador">
           <span class="contaSlide">1</span>
           <span class="contaSlide">2</span>
           <span class="contaSlide">3</span>
        </div>
      </div>  

CSS

    @charset "utf-8";
    /* CSS Document */
    
    div.slideShow {
        position: relative;
        width: 100%;
    }
    div.slideShow div.boxSlide,
    div.slideShow div.contador {
        position: relative;
        display: block;
        width: 100%;
    }
    div.slideShow div.boxSlide,{
    }
    div.slideShow div.boxSlide img {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
    }
    div.slideShow div.boxSlide img:first-child {
        opacity: 1;
    }
    div.slideShow div.boxSlide div.anterior,  
    div.slideShow div.boxSlide div.proximo {
        position: absolute;
        display: block;
        top: 100px;
    }
    div.slideShow div.boxSlide div.anterior {
        left: 100px;
    }
    div.slideShow div.boxSlide div.proximo {
        right: 100px;
    }
    div.slideShow div.boxSlide div.anterior span, 
    div.slideShow div.boxSlide div.proximo span {
        position: absolute;
        display: block;
        width: 30px;
        height: 30px;
    }
    div.slideShow div.boxSlide div.anterior span.boxSpan, 
    div.slideShow div.boxSlide div.proximo span.boxSpan {
        background-color: rgb(200,200,200);
        opacity: .5;
        z-index: 1;
    }
    div.slideShow div.boxSlide div.anterior span.setaSpan, 
    div.slideShow div.boxSlide div.proximo span.setaSpan {
        line-height: 30px;
        text-align: center;
        font-weight: bolder;
        cursor: pointer;
        z-index: 2;
    }
    div.slideShow div.boxSlide div span.setaSpan:hover + span.boxSpan {
        opacity: 1;
    }
    div.slideShow div.contador {
        top:240px;
        background-color:rgba(240,240,240,.5);
    }
    div.slideShow div.contador span.contaSlide {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: rgb(200,200,200);
        cursor: pointer;
        opacity: .5;
    }
    div.slideShow div.contador span.contaSlide:hover {
        opacity: 1;
    }

jQuery

    $(document).ready(function(e) {
    
      quantasImagens = $("div.slideShow div.boxSlide img").length-1;
      contador = 0;
        
      $("div.slideShow div.boxSlide div.anterior").click(function() {
          contador = contador==quantasImagens ?  -1 : contador;
          contador++;
          $("div.slideShow div.boxSlide img").css("opacity",0);
          $("div.slideShow div.boxSlide img").eq(contador).css("opacity",1);
      });
      
      $("div.slideShow div.boxSlide div.proximo").click(function() {
          contador = contador==0 ? quantasImagens+1 :  contador;
          contador--;
          $("div.slideShow div.boxSlide img").css("opacity",0);
          $("div.slideShow div.boxSlide img").eq(contador).css("opacity",1);
      });
      
      $("div.slideShow div.contador span.contaSlide").click(function() {
          index = $(this).index();
          $("div.slideShow div.boxSlide img").css("opacity",0);
          $("div.slideShow div.boxSlide img").eq(index).css("opacity",1);
      });
      
    });


Fazendo testes, descobri que o problema está aqui:

    div.slideShow div.boxSlide img {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        width: 100%;
    }

O Position:absolute está fazendo o elementos de baixo subirem.

 

Já tentei:

 

A) Colocar as imgs como position:relative, display:block e display:inline: Como o espaço do container não cabe, as imagens acabam ficando umas debaixo das outras. 
B) Tentei com display:none e fazendo display:block só na img que deve aparecer: Não adianta, elas acabam tomando espaço abaixo delas.

 

Não sei mais o que fazer.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.