<!-- Slider Start -->
    <div class="hero">
        <div id="hero_slider" class="carousel slide carousel-fade" data-bs-ride="carousel">
            <!-- <div class="carousel-indicators">
                <button type="button" data-bs-target="#hero_slider" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#hero_slider" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#hero_slider" data-bs-slide-to="2" aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#hero_slider" data-bs-slide-to="3" aria-label="Slide 4"></button>
                <button type="button" data-bs-target="#hero_slider" data-bs-slide-to="4" aria-label="Slide 5"></button>
                <button type="button" data-bs-target="#hero_slider" data-bs-slide-to="5" aria-label="Slide 6"></button>
                <button type="button" data-bs-target="#hero_slider" data-bs-slide-to="6" aria-label="Slide 7"></button>
                <button type="button" data-bs-target="#hero_slider" data-bs-slide-to="7" aria-label="Slide 8"></button>
                <button type="button" data-bs-target="#hero_slider" data-bs-slide-to="8" aria-label="Slide 9"></button>
                <button type="button" data-bs-target="#hero_slider" data-bs-slide-to="9" aria-label="Slide 10"></button>
                <button type="button" data-bs-target="#hero_slider" data-bs-slide-to="10" aria-label="Slide 11"></button>
                <button type="button" data-bs-target="#hero_slider" data-bs-slide-to="11" aria-label="Slide 12"></button>
                <button type="button" data-bs-target="#hero_slider" data-bs-slide-to="12" aria-label="Slide 13"></button>
                <button type="button" data-bs-target="#hero_slider" data-bs-slide-to="13" aria-label="Slide 14"></button>
                <button type="button" data-bs-target="#hero_slider" data-bs-slide-to="14" aria-label="Slide 15"></button>
                <button type="button" data-bs-target="#hero_slider" data-bs-slide-to="15" aria-label="Slide 16"></button>

            </div> 
            <div class="carousel-inner">-->
                
                <!-- <div class="carousel-item active">
                    <img src="uploads/slider/1.jpeg" class="d-block w-100" alt="...">
                </div>
                
                <div class="carousel-item">
                    <img src="uploads/slider/2.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="uploads/slider/3.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="uploads/slider/4.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="uploads/slider/5.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="uploads/slider/6.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="uploads/slider/7.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="uploads/slider/8.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="uploads/slider/9.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="uploads/slider/10.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="uploads/slider/11.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="uploads/slider/12.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="uploads/slider/13.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="uploads/slider/14.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="uploads/slider/15.jpeg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="uploads/slider/16.jpeg" class="d-block w-100" alt="...">
                </div> 
              
         
            </div>-->
            <div class="carousel-inner">
            <?php   

 

                        $active ="";
                        $i=0;
                          $slider_query = "SELECT * FROM slider WHERE status = 0 ORDER BY ID DESC";
                        $slider_query_run = mysqli_query($conn, $slider_query);
                           
                        if(mysqli_num_rows($slider_query_run) > 0)
                        {
                            foreach( $slider_query_run as $slideritem)
                            {
                                if($i===0){
                                    $active ="active";
                                    // echo $i;
                                ?>
                                <div class="carousel-item <?= $active ?>">
                                    <img src="<?= 'uploads/slider/'.$slideritem['image'] ?>" alt="" class="d-block w-100">
                                </div>

                                <?php     
                                 }else{ 
                                    //  echo $i;
                                 ?>
                                    <div class="carousel-item">
                                        <img src="<?= 'uploads/slider/'.$slideritem['image'] ?>" alt="" class="d-block w-100">
                                    </div>

                                <?php 
                                    }
                                     $i++;    
                                  
                                //var_dump(array_key_first($slideritem));
                                //var_dump($slideritem);
                                //  if($slideritem === array_key_first(array $slideritem))
                                // {
                                //     $active= "active";
                                // } 
                                
                                // if(mysqli_num_rows($slider_query_run) == 0)
                                // {
                                //    echo $active= "active";
                                // }    

                          ?>   
            
            
            


                <?php   
                            $active= "";
                            }
                        }

                    ?>     
                <!--<div class="carousel-item">
                    <img src="assets/images/fsiblcentury.jpeg" alt="" class="d-block w-100">
                </div>
                <div class="carousel-item">
                    <img src="assets/images/banner1.jpg" alt="" class="d-block w-100">
                </div>-->
            </div>



            <button class="carousel-control-prev" type="button" data-bs-target="#hero_slider" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#hero_slider" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
    <!-- Slider End -->