Carousel Bootstrap + php

Asked

Viewed 2,394 times

1

I have a Carousel in bootstrap, I wanted to do it with 3 images, as an example http://bootsnipp.com/snippets/featured/media-slider-carousel-bs3

But wanted to make it dynamic, follows below my code:

<div class='row'>
    <div class='col-md-8'>
      <div class="carousel slide media-carousel" id="media">
        <div class="carousel-inner">
          <?php $i = 1;?>
          <?php foreach ($anuncios as $anuncio) :?>
          <?php $item_class = ($i == 1) ? 'item active' : 'item'; ?>
          <div class="<?=$item_class;?>">
            <div class="row">
              <div class="col-md-4">
                <img src="imagens/usuarios/<?=$anuncio['nome_thumb']?>" alt="<?=$anuncio['nome_thumb'];?>">
              </div>
            </div>
          </div>
          <?php
          $i++;
          endforeach;
          ?>
        </div>
        <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
        <a data-slide="next" href="#media" class="right carousel-control">›</a>
      </div>                          
    </div>
  </div>
</div>

Only this way, it’s not 3-in-3, it’s only 1-in-1, as I could change to 3-in-3?

Thank you.

php mysql twitter-bootstrap

  • i recommend using http://owlgraphic.com/owlcarousel it is easy to use and has its solution, take a look at the examples

  • Thank you very much, it seems to me that will solve my problem even. I will test and put here, Thank you very much

  • will yes, eh very quiet his documentation. :)

1 answer

1

I’ll post my code, you’ll have to adapt to your need!

<!-- Header Carousel -->
<header 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>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
    <?php
        $readPosts = new Read;
        $readPosts->ExeRead("ws_posts", "WHERE post_type = 'slide' ORDER BY post_date DESC LIMIT 3");
        if ($readPosts->getResult()):
            for ($i=0; $i < 3 ; $i++) { 
            foreach ($readPosts->getResult() as $post):
                extract($post);
                $item_class = ($i) ? 'item active' : 'item';

    ?>

                <div class="<?=$item_class?>">
                    <div class="fill" style="background-image:url('<?=HOME?>/uploads/<?=$post_cover;?>');"></div>
                    <div class="carousel-caption">

                    </div>
                </div>

    <?php


            endforeach;
            }
        endif;
    ?>

    </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>
</header>

Browser other questions tagged php mysql twitter-bootstrap

You are not signed in. Login or sign up in order to post.