CODEWITHSUNDEEP
htmljquerycssbootstrap-5
Ayaz
Ayaz

Reputation: 77

Bootstrap carousel slider not working properly

I am trying to create a Bootstrap carousel slider with indicators Bootstrap code. I also added the caption and it does work. But slider is not working properly.

Issues are

  1. Indicators are not showing up. slider with controls does show up and works fine but height of images is not adjustable.
  2. Cannot adjust the height of the image. I am trying to use like 80% height but it's not working.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper header {
  background-color: rgb(185, 144, 224);
  height: 15%;
}

header .container-fluid .navbar-brand {
  color: white;
}

header .container-fluid .navbar-brand:hover {
  color: rgb(119, 0, 216);
}

header .container-fluid .navbar-nav .nav-item .nav-link {
  color: white;
}

header .container-fluid .navbar-nav .nav-item .nav-link:hover {
  color: rgb(119, 0, 216);
}

header .container-fluid .navbar-nav .dropdown-menu {
  background-color: rgb(163, 157, 168);
}

header .container-fluid .navbar-nav .dropdown-menu .dropdown-item {
  background-color: rgb(163, 157, 168);
  color: white;
}

header .container-fluid .navbar-nav .dropdown-menu .dropdown-item:hover {
  color: rgb(119, 0, 216);
}

header .modal-body {
  background-color: rgb(201, 235, 232);
}

header .modal-body input {
  width: 100%;
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 1px;
  padding-bottom: 1px;
}

header .modal-header {
  background-color: rgb(185, 144, 224);
}

header .modal-header .modal-title {
  color: white;
}

header .btn-login {
  background-color: rgb(154, 98, 206);
  /* color: white; */
  border: 1px solid rgb(185, 144, 224);
}


/* main .carousel-inner {
  height: 100%;
} */

.bg-img-1 {
  background-image: url("./assets/images/noodles.jpg");
}

.bg-img-2 {
  background-image: url("./assets/images/salid.jpg");
}

.bg-img-3 {
  background-image: url("./assets/images/burger.jpg");
}

main .carousel-img {
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.carousel-caption h5 {
  color: black;
  font-size: xx-large;
}

.carousel-caption p {
  color: black;
  font-size: large;
  font-weight: 600;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Boostrap</title>
  <link rel="stylesheet" href="./style.css" />

  <!--Boostrap Import via WEBSITE ONLINE -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <!-- import jquery -->
  <script src="./assets/jQuery/jquery-3.6.2.min.js"></script>

  <!--Boostrap Import via  OFFLINE -->
  <link href="./assets/boostrap/bootstrap.min.css" rel="stylesheet" />
  <script src="./assets/boostrap/bootstrap.bundle.min.js"></script>

  <!-- import font-awesome -->
  <link rel="stylesheet" href="./assets/fontawesome-free-6.2.1-web/css/all.css" />
  <script src="./assets/fontawesome-free-6.2.1-web/js/all.js"></script>

  <!-- boostrap ended -->
</head>

<body>
  <div class="wrapper">
    <header>
      <nav class="navbar navbar-expand-lg navbar-light bg-muted">
        <div class="container-fluid">
          <!-- brand Name -->
          <a class="navbar-brand" href="#">Navbar</a>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <!-- home -->
              <li class="nav-item">
                <a class="nav-link" aria-current="page" href="#">Home</a>
              </li>
              <!-- Link -->
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <!-- DROP DOWN MENU -->
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown
                  </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li>
                    <a class="dropdown-item" href="#">Another action</a>
                  </li>
                  <li>
                    <hr class="dropdown-divider" />
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </li>
                </ul>
              </li>
              <!-- disabled -->
              <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a
                  >
                </li>
              </ul>
              <!-- model 1 starts -->
              <div
                class="modal fade"
                id="exampleModalToggle"
                aria-hidden="true"
                aria-labelledby="exampleModalToggleLabel"
                tabindex="-1"
              >
                <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalToggleLabel">
                        LOGIN
                      </h5>
                      <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                      ></button>
                    </div>
                    <div class="modal-body">
                      <h6>EMAIL</h6>
                      <input />
                      <h6>PASSWORD</h6>
                      <input type="password" />
                    </div>
                    <div class="modal-footer">
                      <button
                        class="btn btn-primary"
                        data-bs-toggle="modal"
                        data-bs-dismiss="modal"
                      >
                        login
                      </button>
                      <button
                        class="btn btn-primary"
                        data-bs-target="#exampleModalToggle2"
                        data-bs-toggle="modal"
                        data-bs-dismiss="modal"
                      >
                        Register Now
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- model 2 starts -->
              <div
                class="modal fade"
                id="exampleModalToggle2"
                aria-hidden="true"
                aria-labelledby="exampleModalToggleLabel2"
                tabindex="-1"
              >
                <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="exampleModalToggleLabel2">
                        REGISTER NOW
                      </h5>
                      <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                      ></button>
                    </div>
                    <div class="modal-body">
                      <h6>NAME</h6>
                      <input />
                      <h6>EMAIL</h6>
                      <input />
                      <h6>PASSWORD</h6>
                      <input type="password" />
                    </div>
                    <div class="modal-footer">
                      <button
                        class="btn btn-primary"
                        data-bs-toggle="modal"
                        data-bs-dismiss="modal"
                      >
                        Register now
                      </button>
                      <button
                        class="btn btn-primary"
                        data-bs-target="#exampleModalToggle"
                        data-bs-toggle="modal"
                        data-bs-dismiss="modal"
                      >
                        Back to Login
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <a
                class="btn btn-primary btn-login"
                data-bs-toggle="modal"
                href="#exampleModalToggle"
                role="button"
              >
                Login <i class="fas fa-sign-in-alt"></i
              ></a>
          </div>
        </div>
      </nav>
    </header>
    <main>
      <!-- image slider -->
      <div class="custom-slider">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item carousel-img bg-img-1 active">
              <div class="carousel-caption d-none d-md-block">
                <h5>Noodles</h5>
                <p>
                  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat, aspernatur aliquid provident maxime a in est aliquam. Ab, dolores. Totam ipsa animi minima porro earum omnis itaque beatae delectus dolores?
                </p>
              </div>
            </div>
            <div class="carousel-item carousel-img bg-img-2">
              <div class="carousel-caption d-none d-md-block">
                <h5>SALAD</h5>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, suscipit dolorem sequi debitis obcaecati ea inventore dignissimos odit animi hic illum expedita dolore! Fugiat assumenda eaque culpa hic corrupti ipsam.
                </p>
              </div>
            </div>
            <div class="carousel-item carousel-img bg-img-3">
              <div class="carousel-caption d-none d-md-block">
                <h5>BURGER</h5>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos rerum natus ex eligendi. Commodi quia reiciendis nisi, earum explicabo dolor rerum porro fuga error pariatur at velit, temporibus, exercitationem eius!
                </p>
              </div>
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </main>
  </div>
</body>

</html>

I added image to custom-slider class and add height. The height of the image is not changing. I am trying to use like 80% height but it's not working.

Upvotes: 0

Views: 479

Answers (1)

kazmi066
kazmi066

Reputation: 625

You are probably using the carousel from the Bootstrap version @4 and not @5 as mentioned in the CDN import. I tried this snippet from the Bootstrap version@5 docs and seems working to me:

<main>
      <!-- image slider -->
      <div class="custom-slider">
        <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="https://images.unsplash.com/photo-1664574653006-4d7eb5f1a418?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>First slide label</h5>
                  <p>Some representative placeholder content for the first slide.</p>
                </div>
              </div>
              <div class="carousel-item">
                <img src="https://images.unsplash.com/photo-1661956602153-23384936a1d3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>Second slide label</h5>
                  <p>Some representative placeholder content for the second slide.</p>
                </div>
              </div>
              <div class="carousel-item">
                <img src="https://images.unsplash.com/photo-1671347020855-8f35d210ee9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60" class="d-block w-100" alt="...">
                <div class="carousel-caption d-none d-md-block">
                  <h5>Third slide label</h5>
                  <p>Some representative placeholder content for the third slide.</p>
                </div>
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
      </div>
    </main>

Upvotes: 1

Related Questions