Rotary Banner with Bootstrap

Asked

Viewed 13,243 times

-5

How do I make a rotating banner with Bootstrap? I searched the Bootstrap documentation, but I didn’t see anything related to rotating banner. How do I do?

In fact what I want is to keep you showing various images, I call rotary banner, that is, calls one image and after a few seconds calls another and so on.

See my code below. The problem is that the PREV and NEXT button are missing, in fact now only the PREV. Something else. When the site enters, 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 have 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>
jquery html css twitter-bootstrap

  • I didn’t understand the down vote

  • 1

    Is that "rotating banner" doesn’t explain much what you want.

  • The Bootstrap API has examples yes: http://getbootstrap.com/javascript/#Carousel

  • It is the bootstrap Carousel, below has an answer.

  • Do not care no, @pnet, it is common to rain downvote without reason or explanation.

  • 2

    Maybe your issue invalidated the answers already given, setting up a chameleon question... If that’s the case, you’d better open a new one.

  • It is complicated this forum. If the question does not agree with what some want, give me down vote. It is a joke.

  • 2

    Good, is not a forum, is a Questions and Answers site. The negative votes went to the first version of your question. The second version should have been a new question. Apparently, you didn’t do the tour of the website nor is familiar with the [help] or with the [meta]...

Show 3 more comments

2 answers

3

You can use the .Carousel() of Bootstrap itself, for example:

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

To help you here is this video classroom about the Carousel from Bootstrap, 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.

  • I don’t understand how to use and the video class is in English, so I don’t understand how to use this code, @Ronny Amarante.

  • What part do you not understand? Actually the good thing about this video that one makes in front of you how it works... I recommend that you take a few hours to study English, even more due to your professional choice, there is no escape... :/

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

Browser other questions tagged jquery html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.