CODEWITHSUNDEEP
cssangularbootstrap-4slidercarousel
A.K.J.94
A.K.J.94

Reputation: 552

Simple Bootstrap carousal not working with Angular 8

I am working with Angular 8 and Bootstrap version 4.5 with a font awesome kit. I'm in a component named the font-project. When I try to slide some images with the carousel, the carousel indicator makes a hyperlink like a thump- cursor but it doesn't work, it stays on the first image. While in the case with the carousel control icon it makes a hyperlink and shows an address in the left bottom corner with http://localhost:4200/font-project#example but it's not working, it still stays on the first image.

The code I am trying to figure out as follows:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<section id="carousel" class="bg-primary py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto text-center">
        <div id="example" class="carousel slide" data-ride="carousel">
          <ul class="carousel-indicators">
            <li data-target="/font-project#example" data-slide-to="0" class="active"></li>
            <li data-target="/font-project#example" data-slide-to="1"></li>
            <li data-target="/font-project#example" data-slide-to="2"></li>
            <li data-target="/font-project#example" data-slide-to="3"></li>
          </ul>
          <div class="carousel-inner">
            <div class="carousel-item active"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
          </div>
          <a href="/font-project#example" class="carousel-control-prev" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
          <a href="/font-project#example" class="carousel-control-next" data slide="next"><span class="carousel-control-next-icon"></span></a>
        </div>
      </div>
    </div>

  </div>
</section>

Upvotes: 0

Views: 63

Answers (2)

BSMP
BSMP

Reputation: 4807

The data-target for the indicators and the href attribute for the controls should both match the id of the top-most div: <div id="example" class="carousel slide" data-ride="carousel">.

Remove "/font-project" from those attributes and fix the missing hyphen in data-slide for the last link and this works:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<section id="carousel" class="bg-primary py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto text-center">
        <div id="example" class="carousel slide" data-ride="carousel">
          <ul class="carousel-indicators">
            <li data-target="#example" data-slide-to="0" class="active"></li>
            <li data-target="#example" data-slide-to="1"></li>
            <li data-target="#example" data-slide-to="2"></li>
            <li data-target="#example" data-slide-to="3"></li>
          </ul>
          <div class="carousel-inner">
            <div class="carousel-item active"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
            <div class="carousel-item"><img src="https://via.placeholder.com/500" alt="project" class="d-block w-100"></div>
          </div>
          <a href="#example" class="carousel-control-prev" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
          <a href="#example" class="carousel-control-next" data-slide="next"><span class="carousel-control-next-icon"></span></a>
        </div>
      </div>
    </div>

  </div>
</section>

Upvotes: 1

Dako patel
Dako patel

Reputation: 920

you can use ui-carousel library for Sliding..]

npm i angular-ui-carousel

for more detail click

Upvotes: 1

Related Questions