Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [Wordpress] [Bootstrap] Bootstrap carousel na wordpressie (bez wtyczki)
Forum PHP.pl > Forum > Gotowe rozwiązania > Systemy portalowe i CMS'y
Vill
Nie odpowiadają mi obecne darmowe pluginy, chcę stworzyć swój slider na bazie bootstrapa.

Mam problem, ponieważ karuzela nie zmienia slajdów, ani strzałkami, ani automatyznie. Strzałki nie wywołują odpowiedniej funkcji, linkują tylko do samych siebie po id.

W konsoli wypisuje mi się błąd
"Uncaught Error: Bootstrap's JavaScript requires jQuery"

Problem w tym, że mam podpiętą bibliotekę jQuery poprzez wordpressa (tak jak się to powinno robić).

  1. <?php wp_enqueue_script("jquery"); ?>
  2. <link rel="Stylesheet" href="<?php bloginfo( 'template_url' ); ?>/bootstrap-3.2.0-dist/css/bootstrap.css" type="text/css" />
  3. <script type="text/javascript" src="<?php bloginfo( 'template_url' ); ?>/bootstrap-3.2.0-dist/js/bootstrap.js"></script>



Co zrobić, żeby karuzela działałą na wordpressie?

Kod karuzeli wzięty z tutorialu bootstrapa

  1. <div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
  2. <!-- Wskaźniki w postaci kropek -->
  3. <ol class="carousel-indicators">
  4. <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
  5. <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
  6. <li data-target="#carousel-example-generic2" data-slide-to="2"></li>
  7. </ol>
  8.  
  9. <!-- Slajdy -->
  10. <div class="carousel-inner">
  11. <div class="item active">
  12. <img src="http://placehold.it/2560x1000" alt="">
  13. <!-- Opis slajdu -->
  14. <div class="carousel-caption">
  15. <h3>To jest opis</h3>
  16. <p>pierwszego slajdu</p>
  17. </div>
  18. </div>
  19.  
  20. <div class="item">
  21. <img src="http://placehold.it/2560x1000" alt="">
  22. <!-- Opis slajdu -->
  23. <div class="carousel-caption">
  24. <h3>To jest opis</h3>
  25. <p>drugiego slajdu</p>
  26. </div>
  27. </div>
  28.  
  29. <div class="item">
  30. <img src="http://placehold.it/2560x1000" alt="">
  31. <!-- Opis slajdu -->
  32. <div class="carousel-caption">
  33. <h3>To jest opis</h3>
  34. <p>trzeciego slajdu</p>
  35. </div>
  36. </div>
  37.  
  38. </div>
  39.  
  40. <!-- Strzałki do przewijania -->
  41. <a class="left carousel-control" href="#carousel-example-generic2" data-slide="prev">
  42. <span class="icon-prev"></span>
  43. </a>
  44. <a class="right carousel-control" href="#carousel-example-generic2" data-slide="next">
  45. <span class="icon-next"></span>
  46. </a>
  47. </div>
Pyton_000
Podepnij po ludzku czyli tak jak masz bootstrapa

Błąd jasno mówi że nie ma jQuery
pedro84
Poczytaj: http://codex.wordpress.org/Function_Refere..._enqueue_script.
Vill
Cytat(Pyton_000 @ 19.09.2014, 12:55:53 ) *
Podepnij po ludzku czyli tak jak masz bootstrapa

Błąd jasno mówi że nie ma jQuery


Czyli podpiąć oryginalną bibliotekę? Inne wtyczki nie będą miały wtedy problemu z kompatybilnością? W końcu jest inna nazwa funkcji.

Ok rozwiązałam problem we właściwy dla wordpressa sposób. Mam nadzieję że komuś się przyda.

  1.  
  2. <?php wp_enqueue_script("jquery"); ?>
  3. <?php
  4. $handle = 'bootstrap';
  5. $src = get_template_directory_uri().'/bootstrap-3.2.0-dist/js/bootstrap.js';
  6. wp_enqueue_script( $handle, $src, array( 'jquery' ) );
  7.  
  8.  
  9. ?>
  10.  
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.