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>