Display bootstrap slider on PHP

0 votes
212 views
added Jul 26, 2017 in PHP by anonymous
recategorized Aug 7, 2017 by LC Marshal
  <!-- Start Carousel -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
 
      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        
        <?php
          foreach ($nldata as $key => $item):
          $name   = $item['project_name'];
          $title = $item['title'];
          $img  = 'http://yoursite.com/img/' . $item['url'];
          $url    = './pagename/site/' . $item['project_param'];   
          $state  = $item['state'];           
        ?>
          <div class="item active">
            <img src="<?php echo $img; ?>">
             <div class="carousel-caption">
              <a href="<?php echo $url; ?>" target="_blank"><span><?php echo $name; ?></span>
              <span><?php echo $title; ?></span> 
              <span><?php echo $state; ?></span>
              </a>
            </div>
          </div><!-- End Item -->
        <?php endforeach; ?>
      </div><!-- End Carousel Inner -->
      

   <div id="slider-thumbnails">
   <ul class="list-group col-sm-4">
      <?php
      // counter for indicators
      $counter=0;
      //variables
          $name   = $item['project_name'];
          $title = $item['title'];
          $img  = 'http://yoursite.com/img/' . $item['url'];
          $url    = './pagename/site/' . $item['project_param'];   
          $state  = $item['state'];             
        ?>
      <li data-target="#myCarousel" data-slide-to="<?=$counter?>" class="list-group-item active">
      <img src="<?php echo $img; ?>">
       <a href="#"><span class="sub-style-0"><?php echo $name; ?></span>
      <span class="sub-style-1"><?php echo $state; ?></span></a>
      </li>
      <?php 
      $counter++; 
      endforeach; ?>
    </ul>

     
   </div>

      <!-- Controls -->
      <div class="carousel-controls">
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
      </div>

    </div>
lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...