Jump to content

ericolvr

Members
  • Content count

    73
  • Joined

  • Last visited

Community Reputation

0 Comum

About ericolvr

  1. ericolvr

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

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.