Bootstrap usando 2 'carousel'

[ericolvr 0]

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.

 

 

 

[DinhoPHP 1]

Também estou passando pelo mesmo problema e preciso utilizar este recurso.