Bootstrap - Proccesswire Carousel

Header section:

    <link href="carousel.css" rel="stylesheet">

Body:

<?
$x=0;
$galeri = $pages->get(2922);
foreach ($galeri->images as $image) {
    $active = ($x == 0) ? "active" : "";
	$li_items .= '<li data-target="#carousel-example-generic" data-slide-to="'.$x.'" class="'.$active.'"></li>';

	$carousel_items .= '
        <div class="item '.$active.'">
		  
          <img class="'.$x.' img-responsive" src="'.$image->url.'" alt="" style="margin: 0 auto;">
          <div class="container">
            <div class="carousel-caption">
             <h1>'.$image->description.'</h1> 
            </div>
          </div>
        </div>'; 
		$x++;}

?>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width: 100%; height:auto;">
  <!-- Indicators -->
  <ol class="carousel-indicators">
  	<?=$li_items?>
  </ol>
  
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
	   <?=$carousel_items?>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</body> den hemen önce:

    <!-- Bootstrap core JavaScript  -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="../../dist/js/bootstrap.min.js"></script>

Bootstrap - Proccesswire Carousel

Dilediğiniz konuları veya fotoları otomatik ve seçmeli olarak kayan formda getirir.