I am using a foreach loop to show up images to appear in the slider. The resultset is as follows:
array (size=4)
0 =>
array (size=1)
'file_name' => string 'SHG_Petty_shop2.jpg' (length=19)
1 =>
array (size=1)
'file_name' => string 'Manavanur_Statue_innaug3.jpg' (length=28)
2 =>
array (size=1)
'file_name' => string 'SHG_Group_meeting6.jpg' (length=22)
3 =>
array (size=1)
'file_name' => string 'Low_cost_toilet4.jpg' (length=20)
Below is the code i did to make the slider in view.
<?php foreach($slider_info as $key=>$slider)
{ ?>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img style="height: 300px;width:100%;" src="<?php //echo base_url();?>upload/sliderimages/<?php echo $slider['file_name']; ?>" height="100" alt="Image of every carousel"/>
</div>
</div>
<?php } ?>
But things are not working as i expected.. I want all the images from the result set to be shown up in the image carousel. I am trying using the foreach loop in codeigniter. I got all the images in the slider, but it shown up horizontally, the slider is not working .Kindly help..
Try this code:
An "active" class must be appended on the first slide, not for all.
<?php
$slider_info[] = array('file_name'=> 'https://www.w3schools.com/bootstrap/ny.jpg' );
$slider_info[] = array('file_name'=> 'https://www.w3schools.com/bootstrap/ny.jpg' );
$slider_info[] = array('file_name'=> 'https://www.w3schools.com/bootstrap/ny.jpg' );
$slider_info[] = array('file_name'=> 'https://www.w3schools.com/bootstrap/ny.jpg' );
$slider_info[] = array('file_name'=> 'https://www.w3schools.com/bootstrap/ny.jpg' );
?>
<!DOCTYPE html>
<html lang="en">
<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/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php foreach($slider_info as $key=>$slider) { ?>
<div class="item <?php echo ($key == 0) ? "active" : ""; ?> ">
<img style="height: 300px;width:100%;" src="<?php echo $slider['file_name']; ?>" height="100" alt="Image of every carousel"/>
</div>
<?php } ?>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
try to change this:
<?php foreach($slider_info as $key=>$slider)
to this:
<?php foreach($slider_info as $slider)
Because you don't need the key value inside your loop, you need to take the array with its value
Related
Trying a dynamic carousel of bootstrap-4 in which the images comes from the database. But only single div is allowed to be active in carousel, so how can i achieve it ? How can I get active in first div in foreach loop.
<?php
include '../employee.php';
$obj= new employees();
$result=$obj->select_image();
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
foreach ($result as $values){
?>
<?php echo $values['profile_pic']; ?>
<div class="carousel-item active" data-interval="2000">
<img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
</div>
<?php
}
?>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I appreciate all the efforts all of them are feasible, but i found one more solution, which i think is the simplest.
I just simply used $count here!
<?php
include '../employee.php';
$obj= new employees();
$result=$obj->select_image();
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Dhruv</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
$count = 0;
foreach ($result as $values){
?>
<div class="carousel-item <?php
if($count==0){
echo "active";
}
else{
echo " ";
}
?>" data-interval="2000">
<img src="<?php echo $values['profile_pic']; ?>" class=" w-100 d-block " alt="...">
</div>
<?php
$count++;
}
?>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" 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>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
A simple method in php would be to have a boolean & use it to determine if it's the first iteration of your loop.
<?php
$isFirst = True;
foreach ($result as $values){
echo $values['profile_pic'];
if ($isFirst == True) {
$isFirst == False;
?>
<div class="carousel-item active" data-interval="2000">
<?php
} else {
?>
<div class="carousel-item" data-interval="2000">
<?php
}
?>
<img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
</div>
<?php
}
?>
You can use an index in your for loop and check to see if it's 0 (the first loop).
<?php
foreach ($result as $index => $values) {
?>
<?php echo $values['profile_pic']; ?>
<div class="carousel-item <?php echo $index === 0 ? 'active' : ''; ?>" data-interval="2000">
<img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
</div>
<?php
}
?>
There are a few options for how you can solve this. I'll describe the easiest way to solve it, but let me know if your array isn't fit to my condition.
1. If keys of your array is numeric, you can use this type of condition
PHP 7.3
<?php
foreach ($result as $key => $values) {
?>
<?php echo $values['profile_pic']; ?>
<div class="carousel-item <?php if ($key === array_key_first($result)): ?>active<?php endif;?>" data-interval="2000">
<img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
</div>
<?php
}
?>
I've added php <?php if ($key === array_key_first($result)): ?>active<?php endif; ?>
which mean that active class should be put only to the first element of your array
PHP <= 7.3
<?php
foreach ($result as $key => $values) {
?>
<?php echo $values['profile_pic']; ?>
<div class="carousel-item <?php if ($key === key($result)): ?>active<?php endif; ?>"
data-interval="2000">
<img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
</div>
<?php
}
Key condition is php <?php if ($key === key($result)): ?>active<?php endif; ?>
All PHP versions (easiest)
<?php
foreach ($result as $index => $values) {
?>
<?php echo $values['profile_pic']; ?>
<div class="carousel-item <?php if ($index === 0): ?>active<?php endif; ?>"
data-interval="2000">
<img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
</div>
<?php
}
Here you only check index which is numeric and put active class only to the first([0]) element of your array
I want to open and have access to my 2 different databases from mysql and display it on 2 different charts respectively. I have put a bootstrap carousel that would ease navigation between 2 charts. Below is my code.
$connect = mysqli_connect("localhost", "root", "", "ws_monitoring");
$query = "SELECT mb_weight, mb_weight_dt, mb_refno, mb_date, mb_weight FROM conveyor_in_entry";
$result = mysqli_query($connect, $query);
$chart_data = '';
while($row = mysqli_fetch_array($result))
{
$chart_data .= "{ mb_weight_dt:'".$row["mb_weight_dt"]."', mb_refno:".$row["mb_refno"].", mb_date:".$row["mb_date"].", mb_weight:".$row["mb_weight"]."}, ";
}
$chart_data = substr($chart_data, 0, -2);
$newconnection = mysqli_connect("localhost", "root", "", "cut" )
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>chart with PHP & Mysql | lisenme.com </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h2>Carousel Test</h2>
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="2000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div id="chart" class="chart" style="width:100%; height:300px;"></div>
</div>
<div class="item">
<div id="chart1" class="chart" style="width:100%; height:300px;"></div>
</div>
<div class="item">
<div id="chart2" class="chart" style="width:100%; height:300 px;"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel" href="#carousel" role="button" data-slide="prev">
<span class="sr-only"></span>
</a>
<a class="right carousel" href="#carousel" role="button" data-slide="next">
<span class="sr-only "></span>
</a>
</div>
</body>
</html>
<script>
Morris.Line({
element : 'chart',
data:[<?php echo $chart_data; ?>],
xkey:'mb_weight_dt',
ykeys:['mb_refno', 'mb_date', 'mb_weight'],
labels:['mb_refno', 'mb_date', 'mb_weight'],
hideHover:'auto',
stacked:true
});
</script>
Chart2 will be coming from a new from a different database with different attributes, so far when I create another query for mysql the same database from the first one appears for the 2nd chart.
I have a bootstrap carousel. I have two column in each row. I want my images to come from database through php.
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/full-slider.css">
<title>Untitled Document</title>
</head>
<body>
<!-- Full Page Image Background Carousel Header -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<?php
$query = mysql_query("select * from slides");
while($row = mysql_fetcj_array($query)){
$slides = $row['image'];
?>
<div class="item active">
<div class="row">
<div class="col-sm-6 col-xs-6"> <img src="<?php echo $slides ?>" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
<div class="col-sm-6 col-xs-6"> <img src="http://placehold.it/260x180" alt=""/>
<div class="carousel-caption">This is a caption</div>
</div>
</div>
</div>
<?php } ?>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
</html>
Now the problem is that I have my first div class (item active), and others are just item. When I applied my PHP every div gets class (item active) how I applied loop in PHP that my html did not disturb and my slider run accurately.
I don't know if this is the right way to do it or not..but what i will suggest is to not to apply the active class in the loop.. Let the DOM load and then apply it to the first index of class using JS(or Jquery).
$(document).ready(function(){
$("item")[0].addClass("active");
})
OR you can just add an if in the PHP code for the first index
if(index==0){
echo "<p class='item active'></p>";
}else{
echo "<p class='item'></p>";
}
Something like this? Check for first iteration:
<?php
$isFirst = true;
while (image loop) {
// echoing image start...
echo "<img ";
// echoing stuff
if ($isFirst) {
echo "class='active'";
}
// echoing the end of image
echo " />";
$isFirst = false;
}
?>
Can't comment so will answer, sorry.
Where is your PHP? Hard to figure out whats wrong with it without seeing it..
EDIT: Your code only has one item defined. It's surprising the carousel even works. You need to close the div
I am building my Wordpress theme with Bootstrap and am using a carousel on my front page right below the navbar. I found a great way to loop through the images here [1]: http://www.lanexa.net/2012/04/how-to-make-bootstrap-carousel-display-wordpress-dynamic-content/
I wanted to run a test on one of the slider areas so I put in the code for the first loop and it displays the title and the excerpt but my image does not show up at all. How can I fix this issue and what is a good way to loop through the rest of the images in the carousel. I added the second loop with the code I found in the link and it messed up my page so I took it out. Here is what I have so far still with some static content that I want to loop through as well. I am going to have 3 images going in the carousel. This is my first real project with Wordpress as I am trying to build my portfolio theme so any help is appreciated!
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<?php
$the_query = new WP_Query(array(
'category_name' => 'Home Carousel',
'posts_per_page' => 1
));
while ($the_query->have_posts() ) :
$the_query->the_post();
$attachment_ids[] = get_the_ID();
endwhile;
wp_reset_postdata();
?>
<!-- Indicators -->
<ol class="carousel-indicators">
<?php foreach($attachment_ids as $attachment_id_k=>$attachment_id_v ){
if($attachment_id_k == 0){$class_active = 'class="active"';}
else{$class_active = 'class=""';}
?>
<li data-target="#myCarousel" <?php echo $class_active;?> data-slide-to="<?php echo $attachment_id_k;?>"></li>
<?php } ?>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-inner">
<?php foreach($attachment_ids as $attachment_id_k=>$attachment_id_v ){
if($attachment_id_k == 0){$class_active = 'class="item active"';}
else{$class_active = 'class="item"';}
?>
<div <?php echo $class_active;?>>
<div class="display_table">
<div class="display_table_cell">
<?php
$default_attr = array(
'class' => "gallery_images",
'alt' => 'Gallery Images',
);
echo wp_get_attachment_image( $attachment_id_v, 'full', 1, $default_attr );
$image_data = get_post( $attachment_id_v );
if($image_data->post_excerpt != ''){
?>
<div class="carousel-caption my_caption">
<p><?php echo $image_data->post_excerpt;?></p>
</div>
<?php }?>
</div>
</div>
</div>
<?php } ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
Here is the Working Code !!!
First through the while loop get all the post IDS in an array
<?php
$the_query = new WP_Query(array(
'category_name' => 'Home Carousel',
'posts_per_page' => 1
));
while ($the_query->have_posts() ) :
$the_query->the_post();
$attachment_ids[] = get_the_ID();
endwhile;
wp_reset_postdata();
?>
Now through the array $attachment_ids get the carousel working
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php foreach($attachment_ids as $attachment_id_k=>$attachment_id_v ){
if($attachment_id_k == 0){$class_active = 'class="active"';}
else{$class_active = 'class=""';}
?>
<li data-target="#myCarousel" <?php echo $class_active;?> data-slide-to="<?php echo $attachment_id_k;?>"></li>
<?php } ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php foreach($attachment_ids as $attachment_id_k=>$attachment_id_v ){
if($attachment_id_k == 0){$class_active = 'class="item active"';}
else{$class_active = 'class="item"';}
?>
<div <?php echo $class_active;?>>
<div class="display_table">
<div class="display_table_cell">
<?php
$default_attr = array(
'class' => "gallery_images",
'alt' => 'Gallery Images',
);
echo wp_get_attachment_image( $attachment_id_v, 'full', 1, $default_attr );
$image_data = get_post( $attachment_id_v );
if($image_data->post_excerpt != ''){
?>
<div class="carousel-caption my_caption">
<p><?php echo $image_data->post_excerpt;?></p>
</div>
<?php }?>
</div>
</div>
</div>
<?php } ?>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
put this javascript code at footer.php, since its bootstrap carousel so need some javascript to set the options
<script type="text/javascript">
$('.carousel').carousel({
interval: 3000
})
</script>
In your code item section you write
<?php the_post_thumbnail('full');?>
but I found that in that tutorial link they used
<?php the_post_thumbnail('large');?>.
Can you check it. Is this the reason for your error ?
I am trying to write a foreach loop for a Bootstrap Carousel in PHP, but the problem I'm having is, the first slide's div must be set as "active" but not the rest, and the li's "data-slide-to" must be set to the correct number, making the first one "[0]" have a class of active, but not the rest...
I know how to get the first result of the foreach, but I don't know how to call the second and beyond separately, nor how to make it match it to the "data-slide-to".
Here is my code below.
Disclaimer: the PHP code is Wordpress-specific, but the answer to the problem does not involve Wordpress-specific code.
PHP
$query_images_args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'post_status' => 'inherit',
'posts_per_page' => - 1,
);
$query_images = new WP_Query( $query_images_args );
$images = array();
foreach ( $query_images->posts as $image ) {
$images[] = wp_get_attachment_url( $image->ID );
}
for($i = 0; $i < count($images); $i++) {
$imageURL = $images[$i];
// I would echo all the entries with:
// echo $imageURL;
}
HTML
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
//Here's the active "li", which would be set to $imageURL[0]
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
//Here are the rest of the "li"s , which idk how to set up?
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
//Again, I know to set the background-image:url to '<?php echo $imageURL[0] ?>'
<div class="fill" style="background-image:url('img/01.png');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
//Not sure about here...
<div class="fill" style="background-image:url('img/02.png');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
//This part needs to be covered by the 2nd imageURL and beyond...
<div class="fill" style="background-image:url('img/03.png');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
Not sure if I'm approaching it correctly, but I cannot get it to work.
<?php
**//for indicators**
foreach($yourArray as $key=>$result){
<li data-target="#myCarousel" data-slide-to="<?php echo $key; ?>" class="<?php if($ke==0){echo "active";} ?>"></li>
}
For Your Image
foreach($yourArray as $key=>$result){
<div class="item <?php if($key==0){echo "active";} ?>">
<div class="fill" style="background-image:url('img/01.png');"></div> // Here is Your Image Url
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
}
Hope This Will Gives You an Idea.
You've probably solved this a long time ago, but this is what I did to solve the first image being set as 'active'.
echo '<div class="item active">'.$images[0].'</div>';
unset($images[0]);
foreach ($images as $img){
echo '<div class="item">'.$img.'</div>';
}