Peço desculpas pois js é algo que tenho uma imensa dificuldade. Não entra na minha cabeça :/ Estou utilizando twitter bootstrap e tenho dois 'carousel' numa página.
http://odontologiaantar.com.br
<link href={% static "css/bootstrap.min.css" %} rel="stylesheet">
<div id="meu-carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#meu-carousel" data-slide-to="0" class="active"></li>
<li data-target="#meu-carousel" data-slide-to="1"></li>
<li data-target="#meu-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="../static/img/img1.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Primeira Imagem</h1>
<p>Sedquis viverra enim vivamus aliquet rutrum dui a varius mauris ornare.</p>
</div>
</div>
</div>
<div class="item">
<img src="../static/img/img1.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Segunda Imagem</h1>
<p>Sedquis viverra enim vivamus aliquet rutrum dui a varius mauris ornare.</p>
</div>
</div>
</div>
<div class="item">
<img src="../static/img/img3.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Terceira Imagem</h1>
<p>Sedquis viverra enim vivamus aliquet rutrum dui a varius mauris ornare.</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#meu-carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#meu-carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!-- segundo, mais abaixo n página -->
<div class="row mtop-30 mbot-100">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
{% for servico in cp_servicos %}
{% if forloop.first %}
<div class="item active">
<div class="col-lg-3 col-md-3 col-sm-4">
<a href="/servico/{{ servico.marcador }}/">
{% thumbnail servico.imagem "700x700" crop="center" as serv %}
<img src="{{ serv.url }}" class="img-responsive mtop-15">
{% endthumbnail %}
</a>
<div class="info">
<h1>{{ servico.servico }}</h1>
<p>{{ servico.descricao|truncatechars:85 }}</p>
</div>
</div>
</div>
{% else %}
<div class="item">
<div class="col-lg-3 col-md-3 col-sm-4">
<a href="/servico/{{ servico.marcador }}/">
{% thumbnail servico.imagem "700x700" crop="center" as serv %}
<img src="{{ serv.url }}" class="img-responsive mtop-15">
{% endthumbnail %}
</a>
<div class="info">
<h1>{{ servico.servico }}</h1>
<p>{{ servico.descricao|truncatechars:85 }}</p>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<script src={% static "js/bootstrap.min.js" %}></script>
<script>
$('#meu-carousel').carousel()
</script>
<script>
$('#myCarousel').carousel({
interval: 7000
})
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
O de cima está mostrando as imagens uma abaixo da outra.
