PHP with Bootstrap Carousel - php

Question

Im trying to learn PHP and using it with the Bootstrap library for my site. I am looking to use the bootstrap carousel as seen here
What I am trying to achieve is the carousel with captions and the Machine Name I am showing in the picture would be a hyperlink that will take you to that page for more info. I have a MySQL database that contains the machine name and the ImagePath as to where it is located.
So my code currently is as below -
<?php
while($row = mysql_fetch_array($result))
{
?>
<div class="bs-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
<img data-src="holder.js/900x800/auto/#777:#777" style="height: 400px; width: 400px;" alt="First slide image" src="<?php echo $row['MachineImagePath'] ?>"/>
<div class="finlay-carousel-caption">
<h3><?php echo $row['MachineName']?></h3>
<div>
<p>
Click the link above for more details about <?php echo $row['MachineName']>
</p>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
<?php
}
mysql_close($connection);
?>
Currently instead of placing each image inside the carosuel this is creating a new carousel for each image down the page. Should the <carousel-example-captions> html be outside the while loop so it is created once and then the img tag will pick up the new image for each slide as you click the next > and prev < buttons.
Note also - <h3><?php echo $row['MachineName']?></h3> - I have not yet turned the header into a hyperlink as I wanted to get the carousel working correctly first.

Answer 1

I recently added a carousel with a link from the mysql database. The issue is that you have the create new carousel code inside of the while statement. If you take it out and just have the new slide commands inside the while it will work perfect.
<div class="bs-example">
<div id="carousel-example-captions" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
$counter = 1;
while($row = mysql_fetch_array($result)){
?>
<div class="item<?php if($counter <= 1){echo " active"; } ?>">
<a href="">
<img data-src="holder.js/900x800/auto/#777:#777" style="height: 400px; width: 400px;" alt="First slide image" src="<?php echo $row['MachineImagePath'] ?>"/>
</a>
<div class="finlay-carousel-caption">
<h3><?php echo $row['MachineName']?></h3>
<p>Click the link above for more details about <?php echo $row['MachineName']>; ?></p>
</div>
</div>
<?php
$counter++;
}
mysql_close($connection);
?>
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-captions" data-slide-to="1"></li>
<li data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
</div>
</div>
If you get the number of rows from you mysql statement you can change the indicators section to have a loop that would allow for unlimited number of slides.

Answer 2

I've solved this issue creating a control variable like this:
define a control variable: $active = true
create a loop
check inside a loop if $active is true
set control variable to false after loop ends
<?php $active = true; ?>
<?php foreach($images as $image):?>
<div class="carousel-item <?php echo ($active == true)?"active":"" ?>">
<img src="assets/img/anuncios/<?php echo $image['image'] ?>" class="d-block w-100" alt="...">
</div>
<?php $active = false; ?>
<?php endforeach; ?>
This way, the active class is printed only at the first loop.

Answer 3

I find most carousel software, even that based on JQuery, too complicated to configure and maintain, that's why I created my own carousel that you can download here for free: https://33hops.com/php-html5-lightweight-slideshow-carousel.html
The premises on top of which I programmed this are short and straight: I just wanted something that could automatically pick the images put in a given folder, preload them and cycle through them with a nice HTML5 transition effect and optionally texts overlayed on top. The result is an ultralight PHP carousel with an ultra low footprint ideal for mobile developments and easy maintenance, just change the images and reload.

Answer 4

<div id="carousel-example-generic" class="carousel slide clearfix" data-ride="carousel">
<div class="carousel-inner">
<?php
$tmp_post = $post;
$query_args = array( 'suppress_filters' => false, 'post_type' => 'post' );
$slides = get_posts( $query_args );
if ( ! empty( $slides ) ) {
$counter = 0;
foreach( $slides as $post ) { setup_postdata( $post ); $counter++;
?>
<div class="item<?php if ($counter == 1) echo ' active'; ?>">
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($loop->ID) );?>
<img src="<?php echo $feat_image ?>" class="img-responsive img-circle"/>
<div class="finlay-carousel-caption">
<?php $degisc= get_post_meta( $post->ID, '_my_meta_value_key', true );?>
<h1><?php echo $degisc;?></h1>
<?php $position = get_post_meta( $post->ID, '_my_meta_value_key1', true );?>
<p><?php echo $position;?></p>
<div class="line marginBottom15"></div>
<?php $words = get_post_meta( $post->ID, '_my_meta_value_key2', true );?>
<p><?php echo $words;?></p>
<div class="line"></div>
</div>
</div>
<?php } }
$post = $tmp_post;
?>
</div>
</div>