1#@!#!123s

: / home / realadss / kavyaeventz.in /
Filename : slider.php
back
<?php include("include/header.php"); ?>
   
   
   <body>

  <!-- Carousel Fixed Height -->
  <section class="carousel-fixed-height">
    <div id="carousel-fixed-height" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel-fixed-height" data-slide-to="0" class=""></li>
        <li data-target="#carousel-fixed-height" data-slide-to="1" class=""></li>
        <li data-target="#carousel-fixed-height" data-slide-to="2" class="active"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <!-- NOTE: Bootstrap v4 changes class name to carousel-item -->
        <div class="item">
          <!-- The only change from the original bootstrap carousel is the "item" divs. I am using this in a CMS so I use inline styles for the background divs so I can set the background image files within the loop.  Just easier for my purposes.  Change the img tag to a div as follows: -->
          <!--<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/158072/woman-camera.jpg" alt="First slide">-->
          <div style="background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/158072/woman-camera.jpg') center center; background-size:cover;" class="slider-size">
            <div class="carousel-caption">
              <h3>A woman with a camera</h3>
              <p>She is probably taking a picture</p>
            </div>
          </div>
        </div>
        <div class="item">
          <!--<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/158072/spiderweb.jpg" alt="Second slide">-->
          <div style="background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/158072/spiderweb.jpg') center center; background-size:cover;" class="slider-size">
            <div class="carousel-caption">
              <h3>Down came the rain</h3>
              <p>And washed the spider out</p>
            </div>
          </div>
        </div>
        <div class="item active">
          <!--<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/158072/hearthand.jpg" alt="Third slide">-->
          <div style="background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/158072/hearthand.jpg') center center; background-size:cover;" class="slider-size">
            <div class="carousel-caption">
              <h3>Making love</h3>
              <p>She is probably taking a picture</p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#carousel-fixed-height" 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-fixed-height" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </section>
  <!-- /end Carousel Fixed Height -->

  
  <!-- Carousel Default -->
  <section class="carousel-default">
    <div id="carousel-default" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel-default" data-slide-to="0" class=""></li>
        <li data-target="#carousel-default" data-slide-to="1" class=""></li>
        <li data-target="#carousel-default" data-slide-to="2" class="active"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <!-- NOTE: Bootstrap v4 changes class name to carousel-item -->
         <?php
            include 'admin/connection.php';
            $banner_query = mysqli_query($conn, "select * from banner");
    
$i = 1;
$total_items = mysqli_num_rows($banner_query);

while($banner_data = mysqli_fetch_array($banner_query)){
    $path = 'admin/images/new/';    
    $image = $path.$banner_data['image'];    
    // $active = ($i == 1) ? "active" : ""; // Set active class for the first image
    $active = ($i == $total_items) ? "active" : ""; // Set last-item class for the last image
?>

    <div class="item <?php echo $active . ' ' . $last_item; ?>">
        <img src="<?php echo $image; ?>" alt="Slide <?php echo $i; ?>">
        <div class="carousel-caption">
            <h3>A woman with a camera</h3>
            <p>She is probably taking a picture</p>
        </div>
    </div>

<?php 
    $i++;
}
?>
      </div>
      <a class="left carousel-control" href="#carousel-default" 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-default" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </section> 

</body>
        
 <?php include("include/footer.php"); ?>