I made dynamic carousel but if I include 'active-item' in loop it not working, this solution is silly but handle. How can I include 'active-item' properly?
<form class="form" action="routes.php" method="POST">
<div id="carouselExampleControls" class="carousel slide bg-light text-primary" data-ride="carousel">
<div class="carousel-inner"
<div class="carousel-item active" >
<img class="d-block m-auto " style="width: 800px; height:600px; " alt="There is <?php echo count($photos);?> photos">
</div>
<?php foreach ($photos as $photo) {?>
<div class="carousel-item">
<img class="d-block m-auto" style="width: 800px; height:600px;" src="../css/image/<?php echo $photo['pic_name']?>" alt="<?php echo $photo['pic_name']?>">
</div>
<?php }?>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</form>
Write a php code as below
$active = ($photo== 1)? 'active-itme':'';
and echo it in the class like
class='<?php echo $active?>'
So it will be triggered only on the first slider image. Since you need the first slider image to be active.
it's important to write 'item-active' properly, this is how I handle it, and its work
<div class="carousel-inner" >
<?php $i=1; foreach ($photos as $photo) {?>
<div class="carousel-item <?php if ($i==1)echo 'active'?>"><?php $i++;?>
<img class="d-block m-auto" style="width: 800px; height:600px;" src="../css/image/<?php echo $photo['pic_name']?>" alt="<?php echo $photo['pic_name']?>">
</div>
<?php }?>
</div>
Related
Trying to fill up a bootstrap carousel with multiple images from database,this is my code yet but doesnt seem to work. Im using PHP PDO,so got a query fetched before what my foreach based on.The query is fine cause without the carousel it lists the images as should be.The issue lays within these lines.
<?php
$stmt = $pdo->prepare("SELECT * FROM images");
$stmt->execute();
$image = $stmt->fetchAll();
?>
<?php foreach($image as $images)
{
?>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/upload/<?php echo $images['image']?>" alt="First slide">
</div>
<div class="carousel-item">
<?php
}
?>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="false"></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="false"></span>
<span class="sr-only">Next</span>
</a>
Place <div class="carousel-inner"> outside the loop, you should only loop over
<div class="carousel-item active">
<img class="d-block w-100" src="/upload/<?php echo $images['image']?>" alt="First slide">
</div>
Example:
<?php
$stmt = $pdo->prepare("SELECT image FROM images");
$stmt->execute();
$images = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php foreach ($images as $index => $image): ?>
<div class="carousel-item<?= !$index ? ' active' : '' ?>">
<img class="d-block w-100" src="<?= $image['image'] ?>" alt/>
</div>
<?php endforeach; ?>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I am getting images from database and want display that images in slider using HTML and PHP code. I have HTML code for sample slider is like below
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="http://placehold.it/1200x600/555/000&text=One" alt="...">
<div class="carousel-caption">
One Image
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/1200x600/fffccc/000&text=Two" alt="...">
<div class="carousel-caption">
Another Image
</div>
</div>
<div class="item">
<img class="img-responsive" src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="...">
<div class="carousel-caption">
Another Image
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
Its working fine but instead use Placeholder images, I want my images which I am getting from database like below PHP code
<?php
$i= 0;
if(!empty($images)){ foreach($images as $image){ $i++;
echo $image->title;
echo $image->file_name;
}
}
?>
I want for first image and then for all other images. I am new in PHP and so confused how I can do it, Let me know if any PHP expert can help me for do it.
Thanks!
It is pretty simple: you have to loop through the images and print the carousel div for each image inside the loop:
<?php
if (!empty($images)) {
?>
<div class="carousel-inner">
<?php
$active = 1;
foreach ($images as $image) {
?>
<div class="item <?php if ($active == 1) echo "active"; ?>">
<img class="img-responsive" src="<?php echo $image->title; ?>" alt="...">
<div class="carousel-caption">
<?php echo $image->file_name; ?>
</div>
</div>
<?php
$active++;
}
?>
</div>
<!-- Controls: Add them inside the condition: if(!empty($images) -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<?php
}
?>
Hi guys im using WP advanced custom fields pro repeater function, trying get my bootstrap slider to work with advanced custom fields.
here is my ACF set up
ACF setup WP side
and here is my bootsrap code with ACF integrated.
my code
<section class="pb-5">
<div class="container">
<div id="carousel_03" class="carousel slide" data-ride="carousel">
<div class="row">
<div class="col-lg-4">
<ol class="carousel-indicators tabs row">
<li class="col-lg-12 col-sm-6 mb-2 active">
<div data-target="#carousel_03" data-slide-to="0" role="button" class="carousel-indicator p-3">
<h4 class="mb-1">one</h4>
</div>
</li>
<li class="col-lg-12 col-sm-6 mb-2">
<div data-target="#carousel_03" data-slide-to="1" role="button" class="carousel-indicator p-3">
<h4 class="mb-1">two</h4>
</div>
</li>
<li class="col-lg-12 col-sm-6 mb-2">
<div data-target="#carousel_03" data-slide-to="2" role="button" class="carousel-indicator p-3">
<h4 class="mb-1">three</h4>
</div>
</li>
<li class="col-lg-12 col-sm-6 mb-2">
<div data-target="#carousel_03" data-slide-to="3" role="button" class="carousel-indicator p-3">
<?php
if( have_rows('slider') ):
while ( have_rows('slider') ) : the_row();
the_sub_field( 'title');
?>
<h4 class="mb-1"><?php the_sub_field($section . 'title') ?></h4>
<?php
endwhile;
endif;
?>
</div>
</li>
</ol>
</div>
<div class="col-lg-8 mb-3">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="some.svg" class="d-block w-100" alt="alt">
</div>
<div class="carousel-item">
<img src="some.svg" class="d-block w-100" alt="alt">
</div>
<div class="carousel-item">
<img src="some.svg" class="d-block w-100" alt="alt">
</div>
<div class="carousel-item">
<?php
if( have_rows('slider') ):
while ( have_rows('slider') ) : the_row();
the_sub_field( 'image');
?>
<img class="img-fluid"
src="<?php the_sub_field($section . 'image') ?>"
alt="<?php the_sub_field($section . 'alt') ?>">
<?php
endwhile;
endif;
?>
</div>
</div>
<a class="carousel-control-prev" href="#carousel_03" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#carousel_03" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</div>
</div>
</div>
</section>
My aim
for less code and to have ACF to pull all images for the slider in the correct order.
My problem
as I currently do not have my images in a array they all display where I cal my sub field, whats the best solution to get this working correctly ?
You are better off using get_field() (https://www.advancedcustomfields.com/resources/get_field/) to retrieve the repeater values in this instance, as this returns an associative array containing all sub-field values.
You can then iterate that array to output the HTML you need for the Bootstrap carousel.
Also worth noting that the image values returned will also contain a key sizes with URLs to the images of all of your themes thumbnail sizes in it, if you want to output a particular image size in the carousel.
Note: I haven't actually tested this with Bootstrap, but it should work.
<?php
// get the ACF values using get_field()
$sliderImages = get_field('slider');
?>
<section class="pb-5">
<div class="container">
<div id="carousel_03" class="carousel slide" data-ride="carousel">
<div class="row">
<div class="col-lg-4">
<ol class="carousel-indicators tabs row">
<!-- Iterate images to output indicators -->
<?php foreach ($sliderImages as $imgNumber => $image) : ?>
<li class="col-lg-12 col-sm-6 mb-2<?php if ($imgNumber === 0) : ?> active<?php endif ?>">
<div data-target="#carousel_<?= $imgNumber ?>" data-slide-to="<?= $imgNumber ?>" role="button" class="carousel-indicator p-3">
<h4 class="mb-1"><?= $imgNumber + 1 ?></h4>
</div>
</li>
<?php endforeach ?>
</ol>
</div>
<div class="col-lg-8 mb-3">
<div class="carousel-inner">
<!-- Iterate images again to output carousel items -->
<?php foreach ($sliderImages as $imgNumber => $image) : ?>
<div class="carousel-item<?php if ($imgNumber === 0) : ?> active<?php endif ?>">
<img src="<?= $image['image']['url'] ?>" alt="<?= $image['image']['alt'] ?>">
</div>
<?php endforeach ?>
</div>
<a class="carousel-control-prev" href="#carousel_03" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#carousel_03" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</div>
</div>
</div>
</section>
My website already connect with database, but somehow bootstrap carousel that I use for slider not working... What I expected the image will be like this:
< image > < image > < image >
But what I get is:
<image>
<image>
<image>
I don't know what's wrong with my code... Can somebody help me?
<!--- Slider -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php foreach ($slider as $slider): ?>
<div class="item active">
<img src="<?php echo base_url('upload/slider/'.$slider->image)?>">
<div class="carousel-caption">
<h3><?php echo $slider->name?></h3>
</div>
</div>
<?php endforeach; ?>
</div>
<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>
I use this and work fine.
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<ol class="carousel-indicators">
<?php for($j=0; $j<count($slider); $j++) {?>
<li data-target="#myCarousel" data-slide-to="<?php echo $j; ?>" class=""></li>
<?php }; ?>
</ol>
<div class="carousel-inner" role="listbox" >
<?php $i=1;
foreach ($slider as $slider) { ?>
<div class="item <?php echo ($i==1) ? "active" : "" ?>">
<img src="<?php echo base_url('upload/slider/'.$slider->image) ?>" alt="" class="img-responsive" style="width:100%" title="">
<div class="carousel-caption">
<h3><?php echo $slider->name?></h3>
</div>
</div>
<?php $i++; } ?>
</div>
<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 class="carousel-line"></div>
</div>
Please help. when i use the default carousel,
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
slide does work, but when i while looped the
<div class="item active">...</div> so the images will be dynamic, it doesnt slide anymore. instead, the images just stacked each other as seen here:
image here
Here is my code:
<!-- carousel -->
<div id="myCarousel" class="carousel slide " data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php
$x = new DB();
$y= $x->selectWithCount(0,'tblimagecarousel',null,null);
// var_dump($y);
$numofimages = $y->fetchColumn();
// echo $numofimages;
for($x=0;$x<$numofimages;$x++)
{
echo "<li data-target='#myCarousel' data-slide-to='{$x}'></li>";
}
?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
$x = new DB();
$y= $x->select(0,'*','tblimagecarousel',null,null);
while($row = $y->fetchObject()){
echo"
<div class='item active'>
<img src='../assets/images/".$row->img."' alt='".$row->title."' width='100%' height='345'>
<div class='carousel-caption'>
<h3>".$row->title."</h3>
<p>".$row->description."</p>
</div>
</div>";
}
?>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" >
<span><img src="../assets/images/ico_prev.png" height="50px" style="margin-top:500%"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span><img src="../assets/images/ico_next.png" height="50px" style="margin-top:500%"></span>
<span class="sr-only">Next</span>
</a>
</div>
I looked at your code your issue is in your loop
the carousel can only have ONE item with the active class at a time (if you only want one to show)
this does not contain the php portion you will have to construct your loop to NOT add the active class (possibly add the active class to the 1st item after)
HTML
<div class="item">
<img src="../assets/images/image1.png" alt="Image one" width="100%" height="345">
<div class="carousel-caption">
<h3>Image one</h3>
<p>Image Description 1</p>
</div>
</div>
<div class="item">
<img src="../assets/images/image2.png" alt="Image two" width="100%" height="345">
<div class="carousel-caption">
<h3>Image two</h3>
<p>Image Description 2</p>
</div>
</div>
<div class="item">
<img src="../assets/images/image3.png" alt="Image three" width="100%" height="345">
<div class="carousel-caption">
<h3>Image three</h3>
<p>Image Description 3</p>
</div>
</div>
<div class="item">
<img src="../assets/images/image4.png" alt="Image four" width="100%" height="345">
<div class="carousel-caption">
<h3>Image four</h3>
<p>Image Description 4</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span><img src="../assets/images/ico_prev.png" height="50px" ></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span><img src="../assets/images/ico_next.png" height="50px" ></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS
body{background-color:#ccc;}
.item{height:400px;}
js
$(document).ready(function(){
$('#myCarousel').carousel();
//this will add the active class to the first item
$('.carousel-inner div.item:first-of-type' ).addClass( "active" );
})
You can view a fiddle HERE