Rotating Banner with Bootstrap

Question

Rotating Banner with Bootstrap

Navigation

#1 by (3 votes)
#2 by (2 votes)

-5

How do I make a rotating banner with Bootstrap? I searched the Bootstrap documentation, but I did not see anything about a rotating banner. How I do?

In truth, what I want to do is to display several images, this is what I call the rotating banner , that is, it calls an image and after a few seconds it calls another image and so on.

See my code below. The problem is that the PREV and NEXT button are disappearing, in fact now only the PREV. Another thing. When the site comes in, the first image appears. When I give a NEXT, it goes to the third image and not to the second and the button disappears. If I give a PREV, it goes back to the second image and not the third (I'm only 3 images). See the code below.

<!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>

html jquery css twitter-bootstrap

asked by anonymous 28.07.2014 / 15:58

2 answers

Error when integrating Waze with PHP? [closed] How do I select in Mysql to get this result

score 3 · Answer 1

You can use Bootstrap's own .Carousel() , for example:

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

To help you out there is this video lesson < a> on the Bootstrap Carousel , we also have the official documentation that shows in more detail your methods.

For example, you can use:

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

score 2 · Answer 2

This is a simple way to apply the slider:

Add this script:

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

In HTML you can declare the images:

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