Jump to content
ericolvr

Bootstrap usando 2 'carousel'

Recommended Posts

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.

 

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

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