Il plug-in Bxslider smette di funzionare dopo la prima "azione"

Sto riscontrando alcuni problemi con questo sito Web su cui sto lavorando.Il plug-in Bxslider smette di funzionare dopo la prima "azione"

sto usando Bxslider plugin per creare una sorta di un portafoglio per pagina progetti, ma qualcosa che non va:

Appena clicco una miniatura o una freccia di direzione, il cursore non funziona più , Non posso cambiare l'immagine visualizzata.

Ho provato a cambiare la posizione del mio markup html ma non ha fatto nulla di nuovo.

Quindi, questo è il mio html

<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" /> 
      <ul class="portfolio"> 
       <li><img src="img/portfolio/projetos3d/1.jpg"></li> 
       <li><img src="img/portfolio/projetos3d/2.jpg"></li> 
       <li><img src="img/portfolio/projetos3d/3.jpg"></li> 
       <li><img src="img/portfolio/projetos3d/7.jpg"></li> 
       <li><img src="img/portfolio/projetos3d/8.jpg"></li> 
      </ul> 
      <div class="thumbs"> 
       <a data-slide-index="0" href=""><img src="img/portfolio/projetos3d/1.jpg"></a> 
       <a data-slide-index="1" href=""><img src="img/portfolio/projetos3d/2.jpg"></a> 
       <a data-slide-index="2" href=""><img src="img/portfolio/projetos3d/3.jpg"></a> 
       <a data-slide-index="3" href=""><img src="img/portfolio/projetos3d/7.jpg"></a> 
       <a data-slide-index="4" href=""><img src="img/portfolio/projetos3d/8.jpg"></a> 
      </div> 
     </div>

e qui i js

<script src="js/jquery.bxslider.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $('.portfolio').bxSlider({ 
      pagerCustom: '.thumbs' 
     }); 
    }); 
</script>

non riesco a scoprire perché questo sta accadendo.

Una piccola mano in più sarebbe molto apprezzata.

Ecco una demo se si vuole vedere che funziona (o non funziona ...)

Grazie per il vostro tempo

EDIT: Ho provato swaping i .js scaricati per quello che usano sul loro sito web, stavo pensando che forse era in qualche modo buggato, ma ho sbagliato, non funziona ancora.

EDIT 2: ho anche provato a passare gli script a prima dell'html ma, come previsto, non ha cambiato nulla.

fonte

2015-08-07 White8Tiger

Ho scoperto qual era il problema.

Ho avuto questa linea che uso su tutto per rendere più veloce l'aggiunta di transizioni a pulsanti e cose.

*{ 
    -webkit-transition: color 0.2s linear, background 0.2s linear, border 0.2s linear; 
     -moz-transition: color 0.2s linear, background 0.2s linear, border 0.2s linear; 
     -o-transition: color 0.2s linear, background 0.2s linear, border 0.2s linear; 
      transition: color 0.2s linear, background 0.2s linear, border 0.2s linear; 
}

Si scopre che stavano controllando il cursore.

fonte

2015-08-10 09:14:52 White8Tiger

Sembra che non ci sia DOCTYPE, head o body all'interno della demo della pagina che hai incluso. Questo potrebbe avere un possibile effetto sulla funzionalità del plugin.

Hai provato a utilizzare un codice valido? Per lo meno:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>BX Slider Example</title> 
    <link rel="stylesheet" type="text/css" href="css/reset.css" /> 
    <link rel="stylesheet" type="text/css" href="css/inovstrap.css" /> 
    <link rel="stylesheet" type="text/css" href="css/css.css" /> 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" type="text/css" href="css/breakingNews.css"> 
    <!-- JS --> 
    <script src="js/jquery-2.1.4.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css" /> 
</head> 

<body> 
    <div class="container"> 
    <h2> 
     PORTFOLIO<br> 
     <span class="white">PROJETOS 3D</span> 
    </h2> 
    <div class="content double_col"> 
     <div class="col"> 
      <ul class="portfolio"> 
       <li><img src="img/portfolio/projetos3d/1.jpg"></li> 
       <li><img src="img/portfolio/projetos3d/2.jpg"></li> 
       <li><img src="img/portfolio/projetos3d/3.jpg"></li> 
       <li><img src="img/portfolio/projetos3d/7.jpg"></li> 
       <li><img src="img/portfolio/projetos3d/8.jpg"></li> 
      </ul> 
      <div class="thumbs"> 
       <a data-slide-index="0" href=""><img src="img/portfolio/projetos3d/1.jpg"></a> 
       <a data-slide-index="1" href=""><img src="img/portfolio/projetos3d/2.jpg"></a> 
       <a data-slide-index="2" href=""><img src="img/portfolio/projetos3d/3.jpg"></a> 
       <a data-slide-index="3" href=""><img src="img/portfolio/projetos3d/7.jpg"></a> 
       <a data-slide-index="4" href=""><img src="img/portfolio/projetos3d/8.jpg"></a> 
      </div> 
     </div> 
     <div class="col portfolio_desc"> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris viverra ligula eget fermentum ultricies. Aenean tempus nec odio at consectetur.<br><br> 
       Donec lobortis consequat sollicitudin. In et aliquam nunc. Phasellus vel viverra eros, ac gravida augue. Sed vel sapien vel enim blandit placerat et a libero. Donec aliquam euismod mauris id semper.<br><br> 
       Maecenas consequat quam elit, in dapibus augue congue eget. Sed faucibus interdum porttitor. Aenean lobortis aliquet leo, et scelerisque leo pretium id. Vestibulum est dolor, cursus sit amet pretium vitae, commodo ut enim. Cras sit amet est turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
      </p> 
      <a href="index.php?p=contactos" class="brochura"><img src="img/portfolio/pdf.png"> &nbsp; Visualizar brochura</a> 
      <a href="index.php?p=contactos" class="orcamento">PEDIR ORÃ‡AMENTO</a> 
     </div> 
    </div> 
</div> 
<!-- SLIDER --> 
<script src="js/jquery.bxslider.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $('.portfolio').bxSlider({ 
      pagerCustom: '.thumbs' 
     }); 
    }); 
</script> 
</body> 
</html>

fonte

2015-08-10 09:03:38 shennan

Il plug-in Bxslider smette di funzionare dopo la prima "azione"

risposta

Problemi correlati