Bootstrap usando 2 'carousel'

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.