I'm using php to show images from database. I'm trying to make a carousel, because now my images are under each other. I don't really understand how should I do that because I use $row['image'] only once to fetch data inside a while and carousel needs more classes with active tag aswell. This is how it looks like now:
the end of the php:
...
while ($row = $res->fetch_assoc()) {
$image = $row['image'];
$data[] = $row;
?>
<?php
echo "<img class='card-img-top' style='padding-bottom: 5px;' src='" . $image . "' />";
}
?>
this is how it looks now:
and this is how it should look:
The carousel I'd like to use: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_carousel
The carousel html:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
As you can see, there are different divs. But I can't use the $image more than once. So how should I implement it?
Collect items and buttons from DB, make sure that only first item/button has active class. Working sample by linked code:
<?php
$carouselItems = '';
$carouselButtons = '';
$i = 0;
while ($row = $res->fetch_assoc()) {
$class = ($i == 0) ? 'active' : '';
$carouselButtons .= "<li data-target='#demo' data-slide-to='{$i}' class='{$class}'></li>";
$carouselItems .= "<div class='carousel-item $class'>
<img src='{$row['image']}' width='1100' height='500'>
</div>";
var_dump($row);
$i++;
}
?>
<body>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<?php echo $carouselButtons; ?>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<?php echo $carouselItems; ?>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
Related
I have this slider that I want to show data from database it's fetch data but the Carousel style don't work.
I want to show the image and the title in Carousel so that ever time the admin change the images from database it's change in the web.
index.php
<!-- -->
<?php include('./includes/header.php');
require("conn.php");
$sql_query = "SELECT * FROM slider_tbl";
$result = $conn->query($sql_query);
?>
<!-- -->
<div class="container">
<br>
<div id="myslider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myslider" data-slide-to="0" class="active"></li>
<li data-target="#myslider" data-slide-to="1"></li>
<li data-target="#myslider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<?php
if($result->num_rows>0) {
while($row=$result->fetch_assoc()) {
?>
<div class="carousel-item active">
<img src="<?php echo $row['slider_imgpath']; ?>"
alt="<?php echo $row['img_title']; ?>"
style='width:100%'>
</div>
</div>
<?php
}
}
?>
<a class="carousel-control-prev" href="#myslider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myslider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- -->
<?php include('./includes/footer.php'); ?>
<!-- -->
conn.php
<?php
$user_name = "root";
$host_name = "localhost";
$password = "";
$db_name = "onlines";
$conn = new mysqli($host_name,$user_name,$password,$db_name);
if($conn->connect_error) {
die("Connnection Error Failed : ".$conn->connect_error);
}
else{
}
?>
the Carousel code work well if i dont use php but when i use it everthing stop in OwlCarousel .
I was making a Dynamic Bootstrap Carousel using PHP. I was watching this and making it: Dynamic BootStrap Carousel
But I got stuck at a place where I am getting a blank page with no error, no source code on inspect element! My code is bit different than the actual link code which is given above.
Here is my code:
<?php
require 'php/dbh.inc.php'; //Database Connection File
$select= 'SELECT*FROM projects;';
$result= mysqli_query($conn, $select);
$count=mysqli_num_rows($result);
if($count<1){
echo "No rows found!";
}
else{
while($row=mysqli_fetch_array($result)){
$rows[]=$row; //Mostly this section is the problem
}
return $rows;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script >
$(function(){
$("#includedContent").load("include.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
<div id="home">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleFade" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleFade" data-slide-to="1"></li>
<li data-target="#carouselExampleFade" data-slide-to="2"></li>
<li data-target="#carouselExampleFade" data-slide-to="3"></li>
<li data-target="#carouselExampleFade" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/Menu/1.jpg" class="d-block w-100" alt="...">
<div class="carousel-content">
<h3>First Slide</h3>
</div>
</div>
<div class="carousel-item">
<img src="Images/Menu/2.jpg" class="d-block w-100" alt="...">
<div class="carousel-content">
<h3>First Slide</h3>
</div>
</div>
<div class="carousel-item">
<img src="Images/Menu/3.jpg" class="d-block w-100" alt="...">
<div class="carousel-content">
<h3>First Slide</h3>
</div>
</div>
<div class="carousel-item">
<img src="Images/Menu/4.jpg" class="d-block w-100" alt="...">
<div class="carousel-content">
<h3>First Slide</h3>
</div>
</div>
<div class="carousel-item">
<img src="Images/Menu/5.jpg" class="d-block w-100" alt="...">
<div class="carousel-content">
<h3>First Slide</h3>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div id="about">
<h1 class="about-head">About Me</h1>
<div class="container">
<div class="row" id="textimg">
<div class="col-md-6 col-sm-12">
<img src="Images/sample.png" class="img-fluid">
</div>
<div class="col-md-6 col-sm-12">
<p>
My name is Kabir Jhangiani, I am an aspiring photojournalist. I reside in this busy city Mumbai, where observing people, their events & capturing the most of it those daily lives became my favourite past time. I want to speak a story through a picture that not only shows what it shows but also speaks out my mind. It’s very interesting to observe people, their activities & what’s happening in their surroundings. My interest towards Street photography started getting more intense when I started covering events & cultures from Ganesh Festival to Muharram.
I would like to capture all of these moments on my camera to speak your style of story through my words. Painters express their art through paint, writers through words, I would like to capture the moments through emotions in them.
I am very fond of documenting different festivals, it talks about the history of the festival and the reasons behind it to celebrate.
Photography to me is, creating history, when we live in the future, we can live in the moment while looking at its visuals.
</p>
</div>
</div>
</div>
</div>
<div id="work">
<h1 class="work-head">Work</h1>
<div class="container">
<div id="workCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<?php
$i=0;
if(count($rows)){
foreach ($rows as $value) {
if($i==0){
echo '<li data-target="#workCarousel" data-slide-to="0" class="active"></li>';
$i++;
}else{
echo '<li data-target="#workCarousel" data-slide-to="0"></li>';
$i++;
}
}
}
?>
</ol>
<div class="carousel-inner">
<?php
$a=0;
if(count($rows)){
foreach ($rows as $value) {
if($a==0){
echo '<div class="carousel-item active">
<img src="Images/Projects/'.$value["ImageName"].'" class="d-block w-100" alt="...">
</div>';
$a++;
}else{
echo ' <div class="carousel-item">
<img src="Images/Projects/'.$value["ImageName"].'" class="d-block w-100" alt="...">
</div>';
$a++;
}
}
}
?>
<div class="carousel-item">
<img src="" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#workCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#workCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>
Mostly according to me the problem is in the while loop section or require line because when i comment that section, my content shows up. Please help!
I'm trying to create a dynamic carousel in laravel but i see only one image. I have looking for solutions from many hours but still i'm stucked
I have tried to change my code from this solution Dynamic carousel in PHP Laravel only shows one image but didn't work
home.blade.php code
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"> </li>
</ol>
<div class="carousel-inner" role="listbox">
#foreach($sliders as $slider)
<div class="carousel-item active">
<img src="{{url('images', $slider->image)}}" class="d-block w-100" alt="...">
</div>
#endforeach
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"> </span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
master.blade.php code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="{{asset('favicon.ico')}}">
<title>1233</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min. css" integrity="sha384- Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper. min.js" integrity="sha384- ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
</head>
<body>
#include('front.nav')
#yield('content')
#include('front.footer')
</body>
</html>
Any help will be appreciated.
The issue why its not working is because the loop
#foreach($sliders as $slider)
<div class="carousel-item active">
<img src="{{url('images', $slider->image)}}" class="d-block w-100" alt="...">
</div>
#endforeach
is adding active class to all the images. You only need active on a single image you can set active on a single using some php workaround like this.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
</ol>
<div class="carousel-inner">
#foreach($sliders as $key => $slider)
<div class="carousel-item {{$key == 0 ? 'active' : '' }}">
<img src="{{url('images', $slider->image)}}" class="d-block w-100" alt="...">
</div>
#endforeach
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"> </span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
also you forgot to close the <div class="carousel-inner"></div> tag.
<div class="carousel-item {{$loop->iteration == 1 ? 'active' : ''}}">
In the <head> section,
jquery script should be written first, tailed by bootstrap.
If the code is right and displaying a single image earlier, it should work now.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
I currently trying to make it where My Database is storing image names like slider1.jpg and then I'm retrieving that from my database, but the issue is when I'm selecting * all from the table its only displaying the first link in the table. Any Ideas on how I can fix this in my code?
Heres my PHP:
<?php
//Gets Links
$stmt = $DB_con->prepare('SELECT * FROM slider');
$stmt->execute();
if($stmt->rowCount() > 0)
{
$row=$stmt->fetch(PDO::FETCH_ASSOC);
extract($row);
}
?>
And Heres my Carousel Slider.
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('images/slider/<?php echo $row['link'];?>')">
<div class="carousel-caption d-none d-md-block">
<h3>First Slide</h3>
<p>This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('images/slider/<?php echo $row['link'];?>')">
<div class="carousel-caption d-none d-md-block">
<h3>Second Slide</h3>
<p>This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('images/slider/<?php echo $row['link'];?>')">
<div class="carousel-caption d-none d-md-block">
<h3>Third Slide</h3>
<p>This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
You need to utilize a loop on the results so you can build each slide with a new $row from the database query:
<?php
// build a clean array of slides from the db grab
$stmt = $DB_con->prepare('SELECT * FROM slider');
$stmt->execute();
$slides = [];
if($stmt->rowCount() > 0) {
$slides = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
?>
.... starter html ....
<ol class="carousel-indicators">
<?php foreach($slides as $i => $slide) { ?>
<li data-target="#carouselExampleIndicators"
data-slide-to="<?php echo $i;?>"
class="<?php echo (!$i?'active':'');?>"></li>
<?php }?>
</ol>
.... more html ....
<div class="carousel-inner" role="listbox">
<?php foreach($slides as $i => $slide) { ?>
<div class="carousel-item <?php echo (!$i?'active':'');?>"
style="background-image: url('images/slider/<?php echo $slide['link'];?>')">
<div class="carousel-caption d-none d-md-block">
<h3><?php echo $slide['slide_name'];?></h3>
<p><?php echo $slide['slide_desc'];?></p>
</div>
</div>
<?php } ?>
</div>
.... the rest of your html output ....
I am using the advanced custom fields Wordpress plugin to create various slides for a slider. To display the slider I am using Bootstraps Carousel.
The body of the slider if functioning fine. I don't, however, know how to loop through, count the slides and print a carousel indicator to the page for each slide.
I currently have 3 hardcoded at the top of the slider.
<ul id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<li class="carousel-inner">
<?php
$c = 0;
$class = '';
while ( have_rows('slide') ) : the_row();
$c++;
if ( $c == 1 ){ $class = ' active';}
else{ $class=''; } ?>
<?php
$image = get_sub_field('image'); ?>
<div class="carousel-item <?php echo $class; ?> image" style="background: url('<?php echo $image; ?>') no-repeat; background-size: cover; background-position: left center;">
</div>
<?php
endwhile; ?>
</li> <!-- end li.image -->
</ul> <!-- end ul -->
I need to find a way to open the ordered list before the slider starts and close it when it ends. At the same time, I need to echo out its li elements for each slide.
<section id="banner">
<?php if( have_rows('slides') ) { ?>
<?php
$num = 0;
$active = 'active';
?>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php while( have_rows('slides') ) : the_row() ; ?>
<li data-target="#carouselExampleIndicators" data-slide-to="<?php echo $num; ?>" class="<?php echo $active; ?>"></li>
<?php
$num++;
$active = '';
?>
<?php endwhile; ?>
</ol>
<div class="carousel-inner">
<?php $active = 'active'; ?>
<?php while( have_rows('slides') ) : the_row() ;
$image = get_sub_field('image');
$mainText = get_sub_field('main_text');
$subText = get_sub_field('sub_text');
?>
<div class="carousel-item <?php echo $active; ?>">
<img class="d-block w-100" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>">
<div class="carousel-caption d-none d-md-block">
<h5><?php echo $mainText; ?></h5>
<p><?php echo $subText; ?></p>
</div>
</div>
<?php $active = ''; ?>
<?php endwhile; ?>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<?php } ?>
</section>
If your HTML is like this :
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Then use this php code :
<?php
$sliders = get_field('slide');
if($sliders){ ?>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<?php $isActive ='';
foreach($sliders as $key=>$slider){
if($key==0){
$isActive = 'active';
}
echo '<li data-target="#carouselExampleIndicators" data-slide-to="'.$key.'" class="'.$isActive.'"></li>';
} ?>
</ol>
<div class="carousel-inner" role="listbox">
<?php
$activeSlide ='';
foreach($sliders as $key=>$sliderimg){
if($key==0){
$activeSlide = 'active';
}
echo '<div class="carousel-item '.$activeSlide.'">';
echo '<img class="d-block img-fluid" src="'.$sliderimg['image']." alt="First slide">';
echo '</div>';
?>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<?php } ?>