Wtyczka Bxslider przestaje działać po pierwszej "akcji"

Mam problemy z tą stroną, nad którą pracuję.Wtyczka Bxslider przestaje działać po pierwszej "akcji"

Używam plugin Bxslider aby stworzyć coś w rodzaju portfela na stronie projekty, ale coś jest nie tak:

Jak tylko kliknąć miniaturę lub strzałkę kierunku, suwak już nie działa , Nie mogę zmienić wyświetlanego obrazu.

Próbowałem przełączać pozycję mojego znacznika HTML, ale nie zrobił nic nowego.

Tak, to jest mój 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>

i tutaj js

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

nie mogę dowiedzieć się, dlaczego tak się dzieje.

Troszkę dodatkowej ręki byłbym bardzo wdzięczny.

Oto demo, jeśli chcesz zobaczyć to działa (lub nie działa ...)

Dziękuję za poświęcony czas

EDIT: Próbowałem swaping pobrane .js do jednej jakich korzystają na swoich Strona internetowa, myślałem, że może to było w jakiś sposób podsłuchane, ale myliłem się, to nadal nie działa.

EDYCJA 2: Próbowałem też zmienić skrypty przed html, ale zgodnie z oczekiwaniami nic się nie zmieniło.

Źródło

2015-08-07 White8Tiger

dowiedziałem się na czym polega problem.

Miałem te linie, których używam na wszystkim, aby przyspieszyć dodawanie przejść do przycisków i innych rzeczy.

*{ 
    -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; 
}

Okazuje się, że podsłuchiwali suwak.

Źródło

2015-08-10 09:14:52 White8Tiger

Wydaje się, nie masz DOCTYPE, head lub body w demo stronie zostały zawarte. Może to mieć wpływ na funkcjonalność wtyczki.

Czy próbowałeś używać prawidłowego znacznika? Co najmniej:

<!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>

Źródło

2015-08-10 09:03:38 shennan

Wtyczka Bxslider przestaje działać po pierwszej "akcji"

Odpowiedz

Powiązane problemy