Bootstrap - Proccesswire Carousel

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

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>


Sitede yayınlanmasını istediğiniz Word veya PDF formatındaki özgün yazılarınızı denizemesaj@gmail.com adresine gönderebilirsiniz. Arzu ederseniz kendi isminizle yayılanır. Yine bu adresten görüş ve fikirlerinizi iletmeniz de mümkün.
You can send your original articles in Word or PDF formats that you want to be published on this site to denizemesaj@gmail.com. If you wish, it will publish by your own name. It is also possible to send your opinions and ideas at this address.