Carousel com Bootstrap

Front-end HTML
, , ,
#1

Olá galera, estou fazendo um trabalho para faculdade porém estou com um problema.

Não consigo fazer um carousel usando uma lista. Os exemplos do bootstrap eu consegui fazer, mas quando eu tento usar um ul e li não vai para a frente,o mais perto que cheguei foi ficar um embaixo do outro. Agora eu estou tentando deixar tudo certo para quando eu for integrar em PHP aí penso em colocar um foreach na lista, mas já queria deixar certo a formatação.
O que eu fiz está abaixo, desde já agradeço a ajuda.

 <section id="portfolio">
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="carousel slide col-xs-12 col-md-3" id="myCarousel">
				<div class="carousel-inner">
					<div class="item active">
						<ul class="thumbnails">
							<li class="span3">
								<div class="item">
									<div class="caption">
										<h5>Caption 1</h5>
									</div>
									<div class="thumbnail">
										<img src="http://placehold.it/260x180" alt="">
									</div>
								</div>
							</li>
							<li class="span3">
								<div class="item">
									<div class="caption">
										<h5>Caption 2</h5>
									</div>
									<div class="thumbnail">
										<img src="http://placehold.it/260x180" alt="">
									</div>
								</div>
							</li>
							<li class="span3">
								<div class="item">
									<div class="caption">
										<h5>Caption 3</h5>
									</div>
									<div class="thumbnail">
										<img src="http://placehold.it/260x180" alt="">
									</div>
								</div>
							</li>
							<li class="span3">
								<div class="item">
									<div class="caption">
										<h5>Caption 4</h5>
									</div>
									<div class="thumbnail">
										<img src="http://placehold.it/260x180" alt="">
									</div>
								</div>
							</li>
							<li class="span3">
								<div class="item">
									<div class="caption">
										<h5>Caption 5</h5>
									</div>
									<div class="thumbnail">
										<img src="http://placehold.it/260x180" alt="">
									</div>
								</div>
							</li>
							<li class="span3">
								<div class="item">
									<div class="caption">
										<h5>Caption 6</h5>
									</div>
									<div class="thumbnail">
										<img src="http://placehold.it/260x180" alt="">
									</div>
								</div>
							</li>
							<li class="span3">
								<div class="item">
									<div class="caption">
										<h5>Caption 7</h5>
									</div>
									<div class="thumbnail">
										<img src="http://placehold.it/260x180" alt="">
									</div>
								</div>
							</li>
							<li class="span3">
								<div class="item">
									<div class="caption">
										<h5>Caption 8</h5>
									</div>
									<div class="thumbnail">
										<img src="http://placehold.it/260x180" alt="">
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
				<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
			</div>
		</div>
	</div>
</section>
#2

Boa noite amigo, entendo sua intenção mais eu prefiro usar a apropria estrutura do bootstrap, no seu código tem um item com a classe .item dentro de um elemento pai também com a classe .item está muito bagunçado apenas por um foreach.

Segue minha recomendação:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
   <?php $count=0; ?>
   <?php foreach($args as $arg): ?>
   <?php if($count == 0) : ?>
   <?php $count++; ?>
    <div class="item active">
   <?php else: ?>
    <div class="item">
   <?php endif ?>
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <?php endforeach ?>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
1 curtida