I am trying to design a carousel using bootstrap and angular js. The portion of the code responsible for my carousel is given below.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
          
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
                <img src="../assets/img3.jpg" alt="Monster Book of Monsters" class="image">
              </div>
          
              <div class="item">
                <img src="../assets/img4.jpg" alt="Awesome Deals" class="image">
              </div>
          
              <div class="item">
                <img src="../assets/img3.jpg" alt="Monster Book of Monsters" class="image">
              </div>
            </div>
          
            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">Next</span>
              </a>
          </div>

My issue is that due to the href included in the anchor tag, everytime I try to change the image by clicking on the icons,the #mycarousel gets appended to my url. The code for my routes are given below.

const routes: Routes = [
/* Include the neccessary paths for routing */

{ path: 'login', component: LoginComponent, pathMatch:'full' },
{ path: 'collection', component: CollectionComponent,pathMatch:'full' },

{path:'about',component:AboutComponent,pathMatch:"full"},

{path:'signing',component:SigningComponent,pathMatch:"full"},
{ path: '**', redirectTo: '/about', pathMatch:'full' }];

Due to "path: '**', redirectTo: '/about', pathMatch:'full' " this line in my route path definitions , everytime #mycarousel gets appended to my url , I get diverted to /about page.

I have also tried to remove the href anchor tag but my carousel is not working. What should I do?

0 Answers