Carousel Boostrap

Asked

Viewed 347 times

0

Hello. I’m trying for the first time to make a Bootstrap.

The Carousel is only in the first image, it does not change automatically nor when I click on the side buttons.

HTML:

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/style.css">
    <!-- JavaScript -->
    <script type="text/javascript" src="static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="static/js/carousel.js"></script>

    <title>Cartão</title>
</head>
<body>

<div class="container-fluid" id="sessionOne">
    <div class="container">
        <div class="row">
            <div class=" col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1">
                <img src="midia/img/logo-topo.png" class="img-responsive">
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <p>Baixe o App</p>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <p>Perguntas Frenquentes</p>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <button type="button" class="btn btn-primary">Solicite aqui<br />o seu cartão</button>
            </div>
        </div>
    </div>
</div>


<!-- Slider -->
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="slider">
            <!-- Topo do slide -->

        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="carousel-bounding-box">
                <div class="carousel slide" id="myCarousel">

                    <!-- Carousel items -->
                    <div class="carousel-inner">
                        <div class="active item" data-slide-number="0">
                        <img src="midia/img/carousel1.png"></div>

                        <div class="item" data-slide-number="1">
                            <img src="midia/img/carousel1.png"></div>

                        <div class="item" data-slide-number="2">
                            <img src="midia/img/carousel2.png"></div>

                        <div class="item" data-slide-number="3">
                            <img src="midia/img/carousel3.png"></div>
                    </div>

                            <!-- Carousel nav -->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>                                
                </div>
            </div>
        </div>
    </div>
</div>
<!--/Slider-->


</body>
</html>

CSS:

.hide-bullets {
list-style: none;
margin-left: -40px;
margin-top: 20px;
}

JS:

  jQuery(document).ready(function($) {

        $('#myCarousel').carousel({
                interval: 1000
        });

        $('#carousel-text').html($('#slide-content-0').html());

        //Handles the carousel thumbnails
       $('[id^=carousel-selector-]').click( function(){
            var id = this.id.substr(this.id.lastIndexOf("-") + 1);
            var id = parseInt(id);
            $('#myCarousel').carousel(id);
        });
});

I don’t know where I’m going wrong, someone could help me?

Grateful!

javascript html css bootstrap carousel

1 answer

1


  • Hello, @Leonardo. Thanks for the reply... I inserted the Jquery script but it’s still the same :/

  • Make sure to insert this script into the HEAD tag and the others after the footer. Inspect the element, go to the console, refresh the page and print.

  • I inserted it at the end of the code, before </body> and it worked, it started passing the slides... But it’s passing too fast, like, one image per second... I changed the value of the interval field from 1000 to 5000 and continued at the same transition speed... It is not the interval field that sets the time for slide placement?

  • Ah, now it was, unintentionally I had erased the key opening { ... kkkkk

  • Thank you so much for helping @Leonardo!!

  • Opa, for nothing. Good luck in the studies @Gabriel

Show 1 more comment

Browser other questions tagged javascript html css bootstrap carousel

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