Bootstrap 3 Carousel Not Working

Question

My carousel from Bootstrap won t display my images or react to the controls   This is my HTML    lt  DOCTYPE HTML gt   lt html gt       lt head gt           lt title gt Skates R Us lt  title gt           lt meta name  viewport  content  width device-width  initial-scale 1 0  gt           lt link rel  stylesheet  href  css bootstrap min css  gt           lt link rel  stylesheet  href  css global css  gt       lt  head gt        lt body gt           lt div class  navbar navbar-inverse navbar-fixed-top  role  navigation  gt               lt div class  container  gt                   lt div class  navbar-header  gt                       lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-collapse  gt                           lt span class  sr-only  gt Toggle navigation lt  span gt                           lt span class  icon-bar  gt  lt  span gt                           lt span class  icon-bar  gt  lt  span gt                           lt span class  icon-bar  gt  lt  span gt                       lt  button gt                       lt a href     class  navbar-brand  gt                          Skates R Us                      lt  a gt                   lt  div gt                   lt div class  collapse navbar-collapse  gt                       lt ul class  nav navbar-nav  gt                           lt li class  active  gt                               lt a href  index html  gt Home lt  a gt                           lt  li gt                           lt li gt                               lt a href  contact html  gt Contact   About lt  a gt                           lt  li gt                           lt li gt                               lt a href  shop html  gt Shop lt  a gt                           lt  li gt                           lt li gt                               lt a href  new html  gt New Products lt  a gt                           lt  li gt                           lt li gt                               lt a href  media html  gt Media lt  a gt                           lt  li gt                       lt  ul gt                   lt  div gt               lt  div gt           lt  div gt            lt div id  carousel  class  carousel slide  data-ride  carousel  gt               lt ol class  carousel-indicators  gt                   lt li data-target  carousel  data-slide-to  0  gt  lt  li gt                   lt li data-target  carousel  data-slide-to  1  gt  lt  li gt                   lt li data-target  carousel  data-slide-to  2  gt  lt  li gt               lt  ol gt               lt div class  carousel-inner  gt                   lt div class  item  gt                       lt img src  img slide 1 png  alt  Slide 1  gt                   lt  div gt                   lt div class  item  gt                       lt img src  img slide 2 png  alt  Slide 2  gt                   lt  div gt                   lt div class  item  gt                       lt img src  img slide 3 png  alt  Slide 3  gt                   lt  div gt               lt  div gt               lt a href   carousel  class  left carousel-control  data-slide  prev  gt                   lt span class  glyphicon glyphicon-chevron-left  gt  lt  span gt               lt  a gt               lt a href   carousel  class  right carousel-control  data-slide  next  gt                   lt span class  glyphicon glyphicon-chevron-right  gt  lt  span gt               lt  a gt           lt  div gt            lt script src  http   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  lt  script gt           lt script src  js bootstrap min js  gt  lt  script gt           lt script gt                  carousel   carousel             lt  script gt       lt  body gt   lt  html gt    My CSS    carousel        margin-top  50px       carousel       height  500px      margin-bottom  60px       Since positioning the image  we need to help out the caption     carousel-caption       z-index  10        Declare heights because of positioning of img element     carousel  item       width  100       height  500px      background-color   777     carousel-inner  gt   item  gt  img       position  absolute      top  0      left  0      min-width  100       height  500px      media  min-width  768px         carousel-caption p               margin-bottom  20px              font-size  21px              line-height  1 4           img       background  red      There are no errors in the Chrome console and the code is pretty much the exact same as that from the Bootstrap examples   This is what the site looks like on my end

User · Answer

Well  Bootstrap Carousel has various parameters to control   i e    Interval  Specifies the delay  in milliseconds  between each slide    pause  Pauses the carousel from going through the next slide when the mouse pointer enters the carousel  and resumes the sliding when the mouse pointer leaves the carousel   wrap  Specifies whether the carousel should go through all slides continuously  or stop at the last slide   For your reference     Fore more details please click here     Hope this will help you     Note  This is for the further help   I mean how can you customise or change default behaviour once carousel is loaded

User · Answer

For me  the carousel wasn t working in the DreamWeaver CC provided the code in the  template  page I am playing with  I needed to add the data-ride  carousel  attribute to the carousel div in order for it to start working  Thanks to Adarsh for his code snippet which highlighted the missing attribute

User · Answer

Here is the changes you need to be done   just replace the carousel div with the below code  You have missed the     for data-target and add active class for the first item   lt div id  carousel  class  carousel slide  data-ride  carousel  gt               lt ol class  carousel-indicators  gt                   lt li data-target   carousel  data-slide-to  0  gt  lt  li gt                   lt li data-target   carousel  data-slide-to  1  gt  lt  li gt                   lt li data-target   carousel  data-slide-to  2  gt  lt  li gt               lt  ol gt               lt div class  carousel-inner  gt                   lt div class  item active  gt                       lt img src  img slide 1 png  alt  Slide 1  gt                   lt  div gt                   lt div class  item  gt                       lt img src  img slide 2 png  alt  Slide 2  gt                   lt  div gt                   lt div class  item  gt                       lt img src  img slide 3 png  alt  Slide 3  gt                   lt  div gt               lt  div gt               lt a href   carousel  class  left carousel-control  data-slide  prev  gt                   lt span class  glyphicon glyphicon-chevron-left  gt  lt  span gt               lt  a gt               lt a href   carousel  class  right carousel-control  data-slide  next  gt                   lt span class  glyphicon glyphicon-chevron-right  gt  lt  span gt               lt  a gt           lt  div gt

User · Answer

There are just two minor things here   The first is in the following carousel indicator list items    lt li data-target  carousel  data-slide-to  0  gt  lt  li gt    You need to pass the data-target attribute a selector which means the ID must be prefixed with     So change them to the following    lt li data-target  quot  carousel quot  data-slide-to  quot 0 quot  gt  lt  li gt    Secondly  you need to give the carousel a starting point so both the carousel indicator items and the carousel inner items must have one active class   Like this    lt ol class  quot carousel-indicators quot  gt       lt li data-target  quot  carousel quot  data-slide-to  quot 0 quot  class  quot active quot  gt  lt  li gt       lt  -- Other Items -- gt   lt  ol gt   lt div class  quot carousel-inner quot  gt       lt div class  quot item active quot  gt           lt img src  quot https   picsum photos 1500 600 image 1 quot  alt  quot Slide 1 quot    gt       lt  div gt       lt  -- Other Items -- gt   lt  div gt    Working Demo in Fiddle

User · Answer

Recently I was helping a friend to find why their carousel was not working   Controls would not work and images were not transitioning  I had a working sample on a page I had used and we went through all the code including checking the items above in this post  We pasted the  good  carousel into the same page and it still worked   Now  all css and bootstrap files were the same for both  The code was now identical  so all we could try was the images   So  we replaced the images with two that were working in my sample  It worked  We replaced the two images with the first two that were originally not working  and it worked   We added back each image  all jpegs  one-by-one  and when we got to the seventh image  of 18  and the carousel failed   Weird  We removed this one image and continued to add the remaining images until they were all added and the carousel worked     for reference  we were using jquery-3 3 1 slim min js and bootstrap 4 3 1 js bootstrap min js on this site   I do not know why an image would or could cause a carousel to malfunction  but it did  I couldn t find a reference to this cause elsewhere either  so I m posting here for posterity in the hope that it might help someone else when other solutions fail   Test carousel with limited set of  known-to-be-good  images

[html] Bootstrap 3 Carousel Not Working

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to carousel