0

Estou com um problema de desenvolvimento CSS de um Slide, somente no navegador Firefox. Para o site estou usando um plugin de slide Jquery Malsup

O Slide funciona perfeitamente em outros navegadores, menos no modo Desktop do Firefox.. (Versão 54.0.1) Vejam as imagens.

Imagem Tela - 1

inserir a descrição da imagem aqui

A Pagina inicial fica vazia, mas se rolar a pagina para direita a imagem foi para lá.. já adicione margin-left 0. left:0 e não resolve, só ajusta se eu mudar a propriedade Inline-Block para block, mas ai eu acabo tendo problema com as transições do slide que ficam estranhas, abaixo meu código. Dicas?

HTML / PHP

  <!--                          Slide                            -->

            <!-- Bloco do Slide e configs de tipo e botão --> 
           <div class= "cycle-slideshow"

                data-cycle-caption-plugin="caption2"           
                data-cycle-timeout="3500"
                Data-cycle-auto-height="container"   
                data-cycle-pager=".cycle-pager"           
                >             


                <?php  


                // repassando os parametros para a consulta e armazenando na variavel $result
                $result = $objeto->SlideConsulta();

                // percorrendo o array através de um laço para exibir as imagens
                foreach($result as $dados){

                $linkslide = $dados->caminhourl;
                ?>     

               <img src="<?=$dados->caminho?>" alt="<?=$dados->descricao?>" data-cycle-desc="<?=$dados->descricao?>" onclick="clickslide('<?=$linkslide?>')">

                <?php
                // fim foreach
                }    

                ?>              
            </div>      
            <div class=cycle-pager></div>   

CSS

  /***************************** SLIDESHOW **********************************************/

    .cycle-slideshow {   
        display: inline-block;
        width: 100%;
        margin-top: -325px;
        left: 0px;      
        /* exibindo a mão (no mouse) ao passar em cima da imagem */
        cursor: pointer;

    } 

    /* pager */
    .cycle-pager { 
        text-align: center; 
        width: 100%; 
        z-index: 500; 
        position: absolute; 
        margin-top: -100px; 
        overflow: hidden;
    }
    .cycle-pager span { 
        font-family: arial; 
        font-size: 80px; 
        width: 33px; 
        height: 16px; 
        display: inline-block; color: #ddd; cursor: pointer; 
    }
    .cycle-pager span.cycle-pager-active { 
        color: #cc6666;
    }
    .cycle-pager > * { cursor: pointer;}

    /* IMAGEM */
    .cycle-slideshow img {
        width: 100%;
        height: auto;
        display: inline-block;
    }

    .cycle-caption {
        top: 10px;
        position: absolute;
        color: white;
        bottom: 15px;
        right: 15px;
        z-index: 700;
    }

    /* overlay * Caption  Slide */
    .cycle-overlay {
        position: absolute;
        background: rgba(0, 0, 0, 0.4);
        color: #fff;
        bottom: 0;
        width: 100%;
        z-index: 600;
        color: white;
        font-size: 2rem;
        padding: .6rem;
    }
4
  • Qual é a versão do seu plugin? Cycle2?
    – user86792
    Commented 14/08/2017 às 22:36
  • Sim! cycle 2! abraços!
    – Diego Lela
    Commented 15/08/2017 às 17:24
  • Talvez possa ser conflito do seu CSS. Mova o CSS do slideshow para o último da lista de arquivos em head.
    – user86792
    Commented 15/08/2017 às 18:03
  • não estou usando um css externo.. o codigo do css que postei acima está dentro da minha folha de estilo personalizada.... abraços
    – Diego Lela
    Commented 15/08/2017 às 19:39

1 Resposta 1

0

Para quem estiver com o mesmo problema,basta não utilizar o complemento do plugin

data-cycle-auto-height=container

Esse complemento aparentemente tem um bug somente em navegadores firefox. Deixei de usar ele e chamei a div conforme abaixo e aí o problema foi resolvido!

  <div class="cycle-slideshow"                
            data-cycle-caption-plugin="caption2"
            data-cycle-speed="800"
            data-cycle-timeout="3000"
            data-cycle-manualSpeed="800"
            data-cycle-prev="#anterior"
            data-cycle-next="#proximo"
            >

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .