PHP With Bootstrap Carousel

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 wit

Solution 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.

Solution 2:

I've solved this issue creating a control variable like this:

1. define a control variable: $active = true

2. create a loop

3. check inside a loop if $active is true

4. 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.

Solution 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.

Solution 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>