0 Replies Latest reply on Jan 3, 2018 2:36 AM by keeleigh

    Bootstrap carousels not working - Chrome

    keeleigh

      Hello, I am having an issue implementing a Bootstrap carousel in a custom HTML widget but get an error when loading in Chrome. The error shows that Bootstrap is loading before Jquery (Uncaught Error: Bootstrap's JavaScript requires jQuery.). However, this error only appears on Chrome - the code runs on IE and firefox, and works locally on Chrome, IE and Firefox. Anyone else had this issue or got Bootstrap carousels working?

       

       

      <!doctype html>

      <html lang="en">

       

      <head>

          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

          <link rel="stylesheet" href="./style.css">

          <link rel="stylesheet" href="./maxstyle.css">

          <!--[if lt IE 9]>

          <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>

        <![endif]-->

      </head>

       

      <body>

      <div class="container-fluid two-col-image-text">

          <div id="myCarousel" class="carousel slide row" data-ride="carousel">

              <!-- Indicators -->

              <ol class="carousel-indicators">

                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

                  <li data-target="#myCarousel" data-slide-to="1"></li>

                  <li data-target="#myCarousel" data-slide-to="2"></li>

                  <li data-target="#myCarousel" data-slide-to="3"></li>

                  <li data-target="#myCarousel" data-slide-to="4"></li>

              </ol>

       

              <!-- Wrapper for slides -->

              <div class="carousel-inner">

       

                  <div class="item active">

                      <div class="col-md-7 no-padding">

                          <div class="image" style="background-image: url()"></div>

                      </div>

                      <div class="col-md-5">

                          <div class="content">

                          </div>

                      </div>

                  </div>

       

                  <div class="item">

                      <div class="col-md-7 no-padding">

                          <div class="image" style="background-image: url()"></div>

                      </div>

                      <div class="col-md-5">

                          <div class="content">        

                          </div>

                      </div>

                  </div>

       

                  <div class="item">

                      <div class="col-md-7 no-padding">

                          <div class="image" style="background-image: url()"></div>

                      </div>

                      <div class="col-md-5">

                          <div class="content">

                          </div>

                      </div>

                  </div>

       

              </div>

       

              <!-- Left and right controls -->

              <div class="controls">

                  <a class="left carousel-control" href="#myCarousel" data-slide="prev">

                      <div class="button"><span class="glyphicon glyphicon-chevron-left"></span>

                      </div>

                  </a>

                  <a class="right carousel-control" href="#myCarousel" data-slide="next">

                      <div class="button"><span class="glyphicon glyphicon-chevron-right"></span></span>

                      </div>

                  </a>

              </div>

          </div>

      </div>

       

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

       

      </body>

       

      </html>