Bootstrap 3 Carousel Not Working


Answer :

There are just two minor things here.

The first is in the following carousel indicator list items:

<li data-target="carousel" data-slide-to="0"></li> 

You need to pass the data-target attribute a selector which means the ID must be prefixed with #. So change them to the following:

<li data-target="#carousel" data-slide-to="0"></li> 

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:

<ol class="carousel-indicators">     <li data-target="#carousel" data-slide-to="0" class="active"></li>     <!-- Other Items --> </ol> <div class="carousel-inner">     <div class="item active">         <img src="https://picsum.photos/1500/600?image=1" alt="Slide 1" />     </div>     <!-- Other Items --> </div> 

Working Demo in Fiddle


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

<div id="carousel" class="carousel slide" data-ride="carousel">             <ol class="carousel-indicators">                 <li data-target="#carousel" data-slide-to="0"></li>                 <li data-target="#carousel" data-slide-to="1"></li>                 <li data-target="#carousel" data-slide-to="2"></li>             </ol>             <div class="carousel-inner">                 <div class="item active">                     <img src="img/slide_1.png" alt="Slide 1">                 </div>                 <div class="item">                     <img src="img/slide_2.png" alt="Slide 2">                 </div>                 <div class="item">                     <img src="img/slide_3.png" alt="Slide 3">                 </div>             </div>             <a href="#carousel" class="left carousel-control" data-slide="prev">                 <span class="glyphicon glyphicon-chevron-left"></span>             </a>             <a href="#carousel" class="right carousel-control" data-slide="next">                 <span class="glyphicon glyphicon-chevron-right"></span>             </a>         </div> 

Comments

Popular posts from this blog

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?