CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcarousel
mezzomix
mezzomix

Reputation: 325

Bootstrap 3.1.1 Carousel not working

Xcart, PHP5.6, Bootstrap 3.1.1

My goal is to make a carousel that displays 3 items at a time and loops over a total of 5 items.

I've ensured my libraries are being called and that they are where they're supposed to be however the carousel never initiates.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

<style type="text/css">
       .container{
         margin: 0 auto;
       } 
</style>

<div class="container">
  <div id="this-carousel-id" class="carousel slide">
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://i.sstatic.net/ihiQ2.png" />
      </div>
      <div class="item">
        <img src="https://i.sstatic.net/ihiQ2.png" />
      </div>
      <div class="item">
        <img src="https://i.sstatic.net/ihiQ2.png" />
      </div>
      <div class="item">
        <img src="https://i.sstatic.net/ihiQ2.png" />
      </div>
      <div class="item">
        <img src="https://i.sstatic.net/ihiQ2.png" />
      </div>
   </div>
   <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;<    /a>     
   <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;    </a>  
  </div>
</div>

$(document).ready(function(){
  $('.carousel').carousel({
           interval: 4000
  });
});

I've tried using sample code from the docs to get something to display carousel-like behavior but instead they are stacking:

enter image description here enter image description here enter image description here I feel terrible because this question has been asked repeatedly and I've followed the answers but I'm stuck.

Upvotes: 1

Views: 998

Answers (2)

Horai Nuri
Horai Nuri

Reputation: 5568

From the snippet you're showing, you have to put your javascript into <script>...</script> tags, be sure that your cdns are using https and not http.

You also forgot to add bootstrap.min.css:

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

Upvotes: 1

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

Use the https://... instead of the http://...

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js

Upvotes: 1

Related Questions