Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Bootstrap Carousel z nawigacją miniaturami
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
4lex
Cześć wszystkim, mam taki kod do slidera z nawigacją w postaci miniaturek do Bootstrapa.

  1. <div class="container">
  2. <h1>Bootstrap 3 Thumbnail Slider / Carousel</h1>
  3.  
  4.  
  5. <!-- thumb navigation carousel -->
  6. <div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs">
  7.  
  8. <!-- thumb navigation carousel items -->
  9. <ul class="list-inline">
  10. <li> <a id="carousel-selector-0" class="selected">
  11. <img src="http://placehold.it/80x60&amp;text=one" class="img-responsive">
  12. </a></li>
  13. <li> <a id="carousel-selector-1">
  14. <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive">
  15. </a></li>
  16. <li> <a id="carousel-selector-2">
  17. <img src="http://placehold.it/80x60&amp;text=three" class="img-responsive">
  18. </a></li>
  19. <li> <a id="carousel-selector-3">
  20. <img src="http://placehold.it/80x60&amp;text=four" class="img-responsive">
  21. </a></li>
  22. <li> <a id="carousel-selector-4">
  23. <img src="http://placehold.it/80x60&amp;text=five" class="img-responsive">
  24. </a></li>
  25. <li> <a id="carousel-selector-5">
  26. <img src="http://placehold.it/80x60&amp;text=six" class="img-responsive">
  27. </a></li>
  28. <li> <a id="carousel-selector-6">
  29. <img src="http://placehold.it/80x60&amp;text=seven" class="img-responsive">
  30. </a></li>
  31. <li> <a id="carousel-selector-7">
  32. <img src="http://placehold.it/80x60&amp;text=eight" class="img-responsive">
  33. </a></li>
  34. <li> <a id="carousel-selector-8">
  35. <img src="http://placehold.it/80x60&amp;text=nine" class="img-responsive">
  36. </a></li>
  37. <li> <a id="carousel-selector-9">
  38. <img src="http://placehold.it/80x60&amp;text=ten" class="img-responsive">
  39. </a></li>
  40. <li> <a id="carousel-selector-10">
  41. <img src="http://placehold.it/80x60&amp;text=eleven" class="img-responsive">
  42. </a></li>
  43. </ul>
  44.  
  45. </div>
  46.  
  47.  
  48. <!-- main slider carousel -->
  49. <div class="row">
  50. <div class="col-md-12" id="slider">
  51.  
  52. <div class="col-md-12" id="carousel-bounding-box">
  53. <div id="myCarousel" class="carousel slide">
  54. <!-- main slider carousel items -->
  55. <div class="carousel-inner">
  56. <div class="active item" data-slide-number="0">
  57. <img src="http://placehold.it/1200x480&amp;text=one" class="img-responsive">
  58. </div>
  59. <div class="item" data-slide-number="1">
  60. <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive">
  61. </div>
  62. <div class="item" data-slide-number="2">
  63. <img src="http://placehold.it/1200x480&amp;text=three" class="img-responsive">
  64. </div>
  65. <div class="item" data-slide-number="3">
  66. <img src="http://placehold.it/1200x480&amp;text=four" class="img-responsive">
  67. </div>
  68. <div class="item" data-slide-number="4">
  69. <img src="http://placehold.it/1200x480&amp;text=five" class="img-responsive">
  70. </div>
  71. <div class="item" data-slide-number="5">
  72. <img src="http://placehold.it/1200x480&amp;text=six" class="img-responsive">
  73. </div>
  74. <div class="item" data-slide-number="6">
  75. <img src="http://placehold.it/1200x480&amp;text=seven" class="img-responsive">
  76. </div>
  77. <div class="item" data-slide-number="7">
  78. <img src="http://placehold.it/1200x480&amp;text=eight" class="img-responsive">
  79. </div>
  80. <div class="item" data-slide-number="8">
  81. <img src="http://placehold.it/1200x480&amp;text=nine" class="img-responsive">
  82. </div>
  83. <div class="item" data-slide-number="9">
  84. <img src="http://placehold.it/1200x480&amp;text=ten" class="img-responsive">
  85. </div>
  86. <div class="item" data-slide-number="10">
  87. <img src="http://placehold.it/1200x480&amp;text=eleven" class="img-responsive">
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92.  
  93. </div>
  94. </div>
  95. <!--/main slider carousel-->
  96.  
  97. </div>


Oraz do tego taki kod.

[JAVASCRIPT] pobierz, plaintext
  1. $('#myCarousel').carousel({
  2. pause: true
  3. });
  4.  
  5. // handles the carousel thumbnails
  6. $('[id^=carousel-selector-]').click( function(){
  7. var id_selector = $(this).attr("id");
  8. var id = id_selector.substr(id_selector.length -1);
  9. id = parseInt(id);
  10. $('#myCarousel').carousel(id);
  11. $('[id^=carousel-selector-]').removeClass('selected');
  12. $(this).addClass('selected');
  13. });
  14.  
  15. // when the carousel slides, auto update
  16. $('#myCarousel').on('slid', function (e) {
  17. var id = $('.item.active').data('slide-number');
  18. id = parseInt(id);
  19. $('[id^=carousel-selector-]').removeClass('selected');
  20. $('[id=carousel-selector-'+id+']').addClass('selected');
  21. });
[JAVASCRIPT] pobierz, plaintext


Problem robi się wtedy, gdy id jest większe od 9, przy id 10 po kliknięciu na miniaturkę slider wraca do obrazka o id 0, i analogicznie miniaturka z id 11 kieruje do obrazka o id 1. Czy wiecie jak to naprawić? Byłbym wdzięczny za pomoc smile.gif
mar1aczi
Co masz pod zmienną "id_selector" (linia 7 Twojego javascriptu)? Jakie zadanie ma spełniać linia poniżej, linia 8?
4lex
Nie do końca wiedziałem, bo to gotowiec, ale już wszystko rozumiem, dzięki za naprowadzenie, działa smile.gif
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-2025 Invision Power Services, Inc.