У меня проблема с большими пальцами, когда я нажимаю на них, это не влияет на мою карусель. моя карусель работает только с кнопками next и prev. Что я хочу сделать, когда я нажимаю в своем миниатюре, он меняет изображение внутри карусели. первый pic моих больших пальцев имеет id = «carousel-selector-0», а в моей карусели – data-slide-number = «0», но это не работает, и я хочу загрузить строки с 7 изображениями в каждом столбце в мой db … см. мой db pic -> http://imgur.com/tzrhtNc это мой весь код —> https://codeshare.io/yiGrk
<?php //$g_id = mysqli_real_escape_string(htmlentities($_GET['id'])); $sql = "SELECT * FROM gallery"; $run = mysqli_query($conn,$sql); while ($rows = mysqli_fetch_assoc($run)){ echo' <div class="modal fade" id="info'.$rows['id'].'" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 class="modal-title">'.$rows['title'].'</h3> </div> <div class="modal-body"> <!--<div class="row"> <div class="container"> <h1>Bootstrap 3 Thumbnail Slider / Carousel</h1> <!-- thumb navigation carousel --> <div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs'.$rows['id'].'"> <!-- thumb navigation carousel items --> <ul class="list-inline"> <li class="col-sm-2" > <a id="carousel-selector-0" class="thumbnail"> <img src="../'.$rows['image'].'"></a></li> <li class="col-sm-2" > <a id="carousel-selector-1" class="thumbnail"> <img src="../'.$rows['img_v1'].'"></a></li> <li class="col-sm-2"> <a id="carousel-selector-2" class="thumbnail"> <img src="../'.$rows['img_v2'].'" class="img-responsive"> </a></li> <li class="col-sm-2"> <a id="carousel-selector-3" class="thumbnail"> <img src="../'.$rows['img_v3'].'" class="img-responsive"> </a></li> <li class="col-sm-2"> <a id="carousel-selector-4" class="thumbnail"> <img src="../'.$rows['img_v4'].'" class="img-responsive"> </a></li> <li class="col-sm-2"> <a id="carousel-selector-5" class="thumbnail"> <img src="../'.$rows['image'].'" class="img-responsive"> </a></li> <!--<li> <a id="carousel-selector-6"> <img src="../'.$rows['image'].'" class="img-responsive"> </a></li> <li> <a id="carousel-selector-7"> <img src="../'.$rows['image'].'" class="img-responsive"> </a></li> <li> <a id="carousel-selector-7"> <img src="../'.$rows['image'].'" class="img-responsive"> </a></li>---> </ul> </div> <!-- main slider carousel --> <div class="row"> <div class="col-md-12" id="slider"> <div class="col-md-12" id="carousel-bounding-box"> <div id="myCarousel'.$rows['id'].'" class="carousel slide"> <!-- main slider carousel items --> <div class="carousel-inner"> <div class="active item" data-slide-number="0"> <img src="../'.$rows['image'].'" class="img-responsive" > </div> <div class="item" data-slide-number="1"> <img src="../'.$rows['img_v1'].'" class="img-responsive"> </div> <div class="item" data-slide-number="2"> <img src="../'.$rows['img_v2'].'" " class="img-responsive"> </div> <div class="item" data-slide-number="3"> <img src=""../'.$rows['img_v3'].'" " class="img-responsive"> </div> <div class="item" data-slide-number="4"> <img src=""../'.$rows['img_v4'].'" " class="img-responsive"> </div> <div class="item" data-slide-number="5"> <img src="http://placehold.it/1200x480&text=six" class="img-responsive"> </div> <div class="item" data-slide-number="6"> <img src="http://placehold.it/1200x480&text=seven" class="img-responsive"> </div> <div class="item" data-slide-number="7"> <img src="http://placehold.it/1200x480&text=eight" class="img-responsive"> </div> </div> <!-- main slider carousel nav controls --> <a class="carousel-control left" href="#myCarousel'.$rows['id'].'" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel'.$rows['id'].'" data-slide="next">›</a> </div> </div> </div> </div> <!--/main slider carousel--> </div> <!--------------------------slider-------------------------------> <!--</div><!-- /.row below modal body--> </div><!-- /.modal-body---> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div> ';} ?> <script> $('#myCarousel').carousel({ interval: 4000 }); // handles the carousel thumbnails $('[id^=carousel-selector-]').click( function(){ var id_selector = $(this).attr("id"); var id = id_selector.substr(id_selector.length -1); id = parseInt(id); $('#myCarousel').carousel(id); $('[id^=carousel-selector-]').removeClass('selected'); $(this).addClass('selected'); }); // when the carousel slides, auto update $('#myCarousel').on('slid', function (e) { var id = $('.item.active').data('slide-number'); id = parseInt(id); $('[id^=carousel-selector-]').removeClass('selected'); $('[id=carousel-selector-'+id+']').addClass('selected'); }); </script>