Twiiter Bootstrap карусель делает динамический с PHP

Я пытаюсь сделать карусель, который использует Twitter и Bootstrap по умолчанию JavaScript и CSS, но изображения должны быть получены из базы данных MySQL.

HTML для карусели, которую я пытаюсь сделать с помощью php, выглядит следующим образом:

<div class="carousel-inner"> <div class="active item"> <img src="images/sampleAd.jpg" class="pull-left marginTop"> <img src="images/sampleAd.jpg" class="pull-left marginTop"> <img src="images/sampleAd.jpg" class="pull-left marginTop"> <img src="images/sampleAd.jpg" class="pull-left marginLast"> </div> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div>

Конечный результат для PHP-файла, который я ожидаю, выглядит следующим образом

 <div class="carousel-inner"> <?php renderAds(); ?> </div>

Функция PHP, которую я написал, выглядит так:

 function renderAds(){ $query = queryAds(); $query_exe = mysql_query($query); if(mysql_num_rows($query_exe) == 0){ echo '<img src="images/sampleAd.jpg" >'; }else{ $numb =1; $flag =1; while($fetched_data = mysql_fetch_array($query_exe)){ if($numb == 1){ if($flag == 1){ echo '<div class="active item">'; }else{ echo '<div class="item">'; } }elseif($numb == 4){ echo '<a href="'.$fetched_data['url'].'" class="pull-left marginLast" ><img src="'.$fetched_data['image_url'].'"></a>'; echo '</div>'; $numb =0; }else{ echo '<a href="'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>'; } $numb++; $flag++; } echo '<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>'; echo '<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>'; } }

Здесь, в отличие от стандартной карусели загрузочной ленты twitter, я сделал каждый слайд с 4 изображениями, я ожидаю, что каждый переход слайдов содержит 4 изображения, а не по умолчанию одно изображение для одного слайда. В HTML это работает, но когда я заменяю его своей функцией PHP, сначала работает слайд, но если я нажимаю следующую стрелку в карусели, весь свод обрушивается.

Как я могу заставить его работать?

Примечание. Здесь последнее изображение должно содержать класс marginLast, а другой должен иметь классы marginTop и pull-left.

То, что я ожидаю получить в html, выглядит следующим образом:

 <div class="carousel-inner"> <div class="active item"> <img src="images/sampleAd.jpg" class="pull-left marginTop"> <img src="images/sampleAd.jpg" class="pull-left marginTop"> <img src="images/sampleAd.jpg" class="pull-left marginTop"> <img src="images/sampleAd.jpg" class="pull-left marginLast"> </div> <div class="item"> <img src="images/sampleAd.jpg" class="pull-left marginTop"> <img src="images/sampleAd.jpg" class="pull-left marginTop"> <img src="images/sampleAd.jpg" class="pull-left marginTop"> <img src="images/sampleAd.jpg" class="pull-left marginLast"> </div> <div class="item"> <img src="images/sampleAd.jpg" class="pull-left marginTop"> <img src="images/sampleAd.jpg" class="pull-left marginTop"> <img src="images/sampleAd.jpg" class="pull-left marginTop"> <img src="images/sampleAd.jpg" class="pull-left marginLast"> </div> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div>

Как я могу заставить свою функцию PHP отображать разметку результатов, как указано выше?

Изменить: Выход, который я получаю, выглядит так:

 <div id="myCarousel" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"> <a href="xx2" class="pull-left marginTop" ><img src="images/sampleAd.jpg"></a> <a href="xx" class="pull-left marginTop" ><img src="images/sampleAd.jpg"></a> <a href="sample.com" class="pull-left marginLast" ><img src="images/sampleAd.jpg"></a> </div> <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div><!-- end carousel-inner --> </div><!-- myCarousel -->

Согласно разметке это должно работать, но это не так, стрелка по умолчанию, если нет слайда, чем один, должен быть отключен, но он доступен для клика.

Solutions Collecting From Web of "Twiiter Bootstrap карусель делает динамический с PHP"

Попросите MySQL-запрос вернуть массив. Таким образом, ваш запрос может повторно использоваться (может быть затем превращен в функцию), и вы можете отображать данные, как вы считаете нужным.

 <?php $mysqli = new mysqli('localhost', 'username', 'password', 'database'); $sql = "SELECT * FROM table"; $res = $mysqli->query($sql); $rows = array(); while ($row = $res->fetch_assoc()) { $rows[] = $row; } ?> <div class="carousel"> <div class="carousel-inner"> <?php $i = 1; ?> <?php foreach ($rows as $row): ?> <?php $item_class = ($i == 1) ? 'item active' : 'item'; ?> <div class="<?php echo $item_class; ?>"> <a href="<?php echo $row['url']; ?>"> <img src="<?php echo $row['image']; ?>" alt="<?php echo $row['title']; ?>" /> </a> </div> <?php $i++; ?> <?php endforeach; ?> </div> </div>

Вам, очевидно, нужно будет изменить запрос базы данных, а также значения, используемые в цикле foreach . Я также использовал функции mysqli , поскольку функции mysql теперь устарели в пользу MySQLi (улучшено MySQL).

Я думаю, что я вышел с ответом на свой вопрос, хотя все приведенные выше ответы дали мне много идей. Спасибо вам всем

 function renderAds(){ $query = queryAds(); $query_exe = mysql_query($query); if(mysql_num_rows($query_exe) == 0){ echo '<img src="images/sampleAd.jpg" >'; }else{ $numb =1; $flag =1; echo '<div class="carousel-inner">'; while($fetched_data = mysql_fetch_array($query_exe)){ if($numb == 1){ if($flag == 1){ echo '<div class="active item">'; }else{ echo '<div class="item">'; } echo '<a target="_blank" href="http://'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>'; }elseif($numb == 4){ echo '<a target="_blank" href="http://'.$fetched_data['url'].'" class="pull-left marginLast" ><img src="'.$fetched_data['image_url'].'"></a>'; $numb = 0; echo '</div>'; }else{ echo '<a target="_blank" href="http://'.$fetched_data['url'].'" class="pull-left marginTop" ><img src="'.$fetched_data['image_url'].'"></a>'; } $numb++; $flag++; } if($numb > 1 && $numb < 4 ){ echo '</div>'; echo '</div>'; }elseif($numb == 1){ echo '</div>'; }elseif($numb == 4){ echo '</div>'; echo '</div>'; } echo '<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>'; echo '<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>'; } }

 <div class="carousel-inner"> <?php // Twitter Bootstrap Carousel. $caseStudies = get_posts(array( 'numberposts' => 12, 'post_type' => 'case-study', 'meta_key' => 'show_case_study_home', 'meta_value' => 'yes', 'post_status' => 'publish', )); $open = 0; $close = 1; $active = 0; $didClose = false; foreach($caseStudies as $caseStudy){ $image = get_field('image_home', $caseStudy->ID); $header = get_field('header_home', $caseStudy->ID); $intro = get_field('intro_home', $caseStudy->ID); $activeCss = ""; if(($open)%4 == 0) { if ($active == 0) $activeCss = " active"; echo '<div class="item'. $activeCss .'"><ul class="thumbnails">'; } ?> <li class="span3"> <div class="case-study"> <img src="<?php echo $image['url']; ?>" alt=""> <a href="<?php echo get_permalink($caseStudy->ID); ?>" class="btn-more read-hover">Read More</a> <h4><?php echo $header; ?></h4> <p><?php echo $intro; ?></p> </div> </li> <? if(($close)%4 == 0) { echo "<ul></div>"; $didClose = true; // Maybe the carousel has less than 4 items ... } $open++; $close++; $active++; } if($didClose == false) echo "</div></div>"; // If has less than 4 items in the carousel close the tags. ?> </div><!--/.caroussel-inner -->