CODEWITHSUNDEEP
bootstrap-4
Dev Tin
Dev Tin

Reputation: 157

why carousel not work in bootstrap locally?

I want to use carousel bootstrap 4 locally, but it doesn't work, I put the files bootstrap.min.css and bootstrap.min.js also jquery.min.js.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-md-12">

      <div class="container-fluid">
        <div class="carousel slide" data-ride="carousel" id="carousel">

           <ol class="carousel-indicators">
             <li data-target="#carousel" data-slide to="0" class="active"></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/index.jpg">
             </div>
             <div class="item">
               <img src="img/1index.jpg">
             </div>
             <div class="item">
               <img src="img/2index.jpg">
             </div>
          </div>

          <a class="carousel-control left" href="#carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="carousel-control right" href="#carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>

        </div> 
      </div>

   </div>
  </div>
</div>


</body>
</html>

Upvotes: 0

Views: 250

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15031

a few things:

  • change the class item into carousel-item to get this working
  • also, the correct form is data-slide-to instead of data-slide to
  • container-fluid is full width, nesting it under a container wouldn't help

working snippet below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">

      <div class="container-fluid">
        <div class="carousel slide" data-ride="carousel" id="carousel">

          <ul class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
          </ul>

          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://www.w3schools.com/bootstrap4/la.jpg">
            </div>
            <div class="carousel-item">
              <img src="https://www.w3schools.com/bootstrap4/ny.jpg">
            </div>
            <div class="carousel-item">
              <img src="https://www.w3schools.com/bootstrap4/chicago.jpg">
            </div>
          </div>

          <a class="carousel-control-prev left" href="#carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a class="carousel-control-next right" href="#carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="carousel-control-next-icon"></span>
          </a>

        </div>
      </div>

    </div>
  </div>
</div>

Upvotes: 1

Related Questions