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.

<divclass="bs-example"><divid="carousel-example-captions"class="carousel slide"data-ride="carousel"><divclass="carousel-inner"><?php$counter = 1;
    while($row = mysql_fetch_array($result)){
?><divclass="item<?phpif($counter <= 1){echo" active"; } ?>"><ahref=""><imgdata-src="holder.js/900x800/auto/#777:#777"style="height: 400px; width: 400px;"alt="First slide image"src="<?phpecho$row['MachineImagePath'] ?>"/></a><divclass="finlay-carousel-caption"><h3><?phpecho$row['MachineName']?></h3><p>Click the link above for more details about <?phpecho$row['MachineName']>; ?></p></div></div><?php$counter++;
    }
    mysql_close($connection);
?><olclass="carousel-indicators"><lidata-target="#carousel-example-captions"data-slide-to="0"class="active"></li><lidata-target="#carousel-example-captions"data-slide-to="1"></li><lidata-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; ?><?phpforeach($imagesas$image):?>
      <div class="carousel-item <?phpecho ($active == true)?"active":"" ?>"> 
        <imgsrc="assets/img/anuncios/<?phpecho $image['image'] ?>" class="d-blockw-100" alt="...">
      </div>
    <?php $active = false; ?>
    <?phpendforeach; ?>

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:

<divid="carousel-example-generic"class="carousel slide clearfix"data-ride="carousel"><divclass="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( $slidesas$post ) { setup_postdata( $post ); $counter++;
        ?><divclass="item<?phpif ($counter == 1) echo' active'; ?>"><?php$feat_image = wp_get_attachment_url( get_post_thumbnail_id($loop->ID) );?><imgsrc="<?phpecho$feat_image?>"class="img-responsive img-circle"/><divclass="finlay-carousel-caption"><?php$degisc= get_post_meta( $post->ID, '_my_meta_value_key', true );?><h1><?phpecho$degisc;?></h1><?php$position = get_post_meta( $post->ID, '_my_meta_value_key1', true );?><p><?phpecho$position;?></p><divclass="line marginBottom15"></div><?php$words = get_post_meta( $post->ID, '_my_meta_value_key2', true );?><p><?phpecho$words;?></p><divclass="line"></div></div></div><?php } } 
        $post = $tmp_post;
        ?></div></div>