Carousel Bootstrap + php

Question

Carousel Bootstrap + php

Navigation

#1 by (1 votes)

1

I have a carousel in bootstrap, I wanted to do it with 3 images, as per example link

But I wanted to make it dynamic, here is my code below:

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

So, it's not 3 in 3, so it's only 1 in 1, how could I change it to 3 in 3?

Thank you.

php mysql twitter-bootstrap

asked by anonymous 24.02.2015 / 03:51

1 answer

Two selects with the same script Insertion in Mysql with radio button + option + input

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