-5

Como eu faço um banner rotativo com Bootstrap? Pesquisei na documentação do Bootstrap, mas não vi nada relativo a banner rotativo. Como eu faço?

Em verdade o que eu quero é fazer com que fique mostrando várias imagens, isso eu chamo de banner rotativo, ou seja, chama uma imagem e depois de alguns segundos chama outra e assim por diante.

Veja o meu código abaixo. O problema é que o botão PREV e NEXT estão sumindo, em verdade agora somente o PREV. Outra coisa. Quando o site entra, aparece a primeira imagem. Quandou dou um NEXT, ele vai para terceira imagem e não para a segunda e o botão some. Se dou um PREV, ele volta para a segunda imagem e não a terceira(Estou com somente 3 imagens). Veja o código abaixo.

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="~/Scripts/bootstrap.js" type="text/javascript"></script>
</head>
<body>
    <div id="bannerRotativo" >
        <ol class="carousel-indicators">
            <li data-target="#bannerRotativo" data-slide-to="0" class="active"></li>
            <li data-target="#bannerRotativo" data-slide-to="1" ></li>
            <li data-target="#bannerRotativo" data-slide-to="2" ></li>
        </ol>

        <div class="carousel-inner">
            <div class="item active">
                <img src="~/Images/imagem_1.jpg" alt="..." height="900" width="500">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="~/Images/imagem_2.jpg" alt="..." height="900" width="500">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item">
                <img src="~/Images/imagem_3.jpg" alt="..." height="900" width="500">
                <div class="carousel-caption">
                    ...
                </div>
                ...
            </div>

            <a class="left carousel-control" href="#bannerRotativo" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#bannerRotativo" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>

    </div>
    <div class="navbar navbar-inverse">
        <div class="Container">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#about">Technologies</a></li>
                <li><a href="#contact">Article</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">blog<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Cadastro</a></li>
                        <li><a href="#">Downloads</a></li>
                        <li><a href="#">Artigos</a></li>
                        <li><a href="#">Teste</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">News <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Technologies</a></li>
                        <li><a href="#">Article</a></li>
                        <li><a href="#">blog</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div id="">

    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.dropdown-toggle').dropdown();
        });
    </script>

</body>

</html>
8

2 Respostas 2

3

Você pode utilizar o .Carousel() do próprio Bootstrap, exemplo:

<script>
  $(document).ready(function(){
    $('.carousel').carousel({
      interval: 2000
    });
  });
</script>

Para te ajudar aqui tem essa vídeo-aula sobre o Carousel do Bootstrap, também temos a documentação oficial que mostra com mais detalhes seus métodos.

Por exemplo, você pode usar:

.carousel('pause') // Para a rotação
.carousel(numero-desejado) // Altera o ciclo para uma posição específica
.carousel('prev') // Altera o ciclo para a posição anterior
.carousel('next') // Altera o ciclo para a próxima posição.
2
  • Não entendi como usar e a vídeo aula está em inglês, por isso não estou entendendo como usar esse código, @Ronny Amarante.
    – pnet
    28/07/2014 às 20:45
  • Que parte você não entendeu? Na verdade o bom desse vídeo que a pessoa faz na sua frente como funciona... Recomendo que você tome algumas horas para estudar inglês, ainda mais devido a sua escolha profissional, não tem como escapar... :/ 29/07/2014 às 4:07
2

Essa é uma forma simples de aplicar o slider:

Adicione esse script:

<script>
    $(document).ready(function () {
        $('.carousel').carousel({
            interval: 3000
        })
    });
</script>

No HTML você poderá declarar as imagens:

<div id="carousel-example-generic" class="carousel slide">
<div class="carousel-inner">
    <div class="item active">
        <img class="img-responsive img-full" src="Content/img/img1.png" alt="">
    </div>
    <div class="item">
        <img class="img-responsive img-full" src="Content/img/img2.png" alt="">
    </div>
    <div class="item">
        <img class="img-responsive img-full" src="Content/img/img3.png" alt="">
    </div>
</div>

<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
</a>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .