CODEWITHSUNDEEP
node.jstwitter-bootstrapexpresspugcarousel
Chong Lip Phang
Chong Lip Phang

Reputation: 9279

Can't slide to previous/next image in Bootstrap carousel in node.js Express

I just downloaded Bootstrap 3.3.5. I tried to follow the example here at w3Schools Bootstrap tutorial to create a carousel. The images do slide automatically. However, when I clicked the < and > icons I was directed to an error page saying 'Cannot GET /carousel'.

The following is my Jade code:

div#carousel.carousel.slide(data-ride='carousel')
 ol.carousel-indicators
  li(data-target='#carousel' data-slide-to='0' class='active')
  li(data-target='#carousel' data-slide-to='1' class='active')
  li(data-target='#carousel' data-slide-to='2' class='active')
  li(data-target='#carousel' data-slide-to='3' class='active')
  li(data-target='#carousel' data-slide-to='4' class='active')
  li(data-target='#carousel' data-slide-to='5' class='active')
 div.carousel-inner(role='list-box')
  div.item.active: img.center-block(src='img/crs1.jpg')
  div.item: img.center-block(src='img/crs2.jpg')
  div.item: img.center-block(src='img/crs3.jpg')
  div.item: img.center-block(src='img/crs4.jpg')
  div.item: img.center-block(src='img/crs5.jpg')
  div.item: img.center-block(src='img/crs6.jpg')
 a.left.carousel-control(href='carousel' role='button' data-slide='previous')
  span.glyphicon.glyphicon-chevron-left(aria-hidden='true')
  span(sr-only='true') Previous
 a.right.carousel-control(href='carousel' role='button' data-slide='next')
  span.glyphicon.glyphicon-chevron-right(aria-hidden='true')
  span(sr-only='true') Next

How can I solve this?

Upvotes: 0

Views: 976

Answers (1)

TbWill4321
TbWill4321

Reputation: 8676

You need to change the href to href='#carousel'. In the tutorial, they are changing the window to a new page bookmark, not a new page url.

Upvotes: 2

Related Questions