Ad

Bootstrap Carousel Doesn't Slide In Pug

- 1 answer

layout.pug

doctype html
html
  body
  head
    title= title
    script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js' integrity='sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM' crossorigin='anonymous')
    link(rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' integrity='sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T' crossorigin='anonymous')
    link(rel='stylesheet' href='stylesheets/style.css')
    block content
      .dropdown-menu(aria-labelledby='navbarDropdownMenuLink')
        a.dropdown-item(href='#') Action
        a.dropdown-item(href='#') Another action
        a.dropdown-item(href='#') Something else here
      a#navbarDropdownMenuLink.nav-link.dropdown-toggle(href='#' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false')
        | Dropdown link
      ul.navbar-nav
        li.nav-item.active
          a.nav-link(href='#')
            | Home
            span.sr-only (current)
        li.nav-item
          a.nav-link(href='#') Features
        li.nav-item
          a.nav-link(href='#') Pricing
        li.nav-item.dropdown
    nav.navbar.navbar-expand-lg.navbar-light.bg-light
      a.navbar-brand(href='#') Navbar
      button.navbar-toggler(type='button' data-toggle='collapse' data-target='#navbarNavDropdown' aria-controls='navbarNavDropdown' aria-expanded='false' aria-label='Toggle navigation')
        span.navbar-toggler-icon
      #navbarNavDropdown.collapse.navbar-collapse

index.js

#carouselExampleControls.carousel.slide(data-ride='carousel')
  .carousel-inner
    .carousel-item.active
      img.d-block.w-100(src='images/image2.jpg' alt='...')
    .carousel-item
      img.d-block.w-100(src='images/image3.jpg' alt='...')
  a.carousel-control-prev(href='#carouselExampleControls' role='button' data-slide='prev')
    span.carousel-control-prev-icon(aria-hidden='true')
    span.sr-only Previous
  a.carousel-control-next(href='#carouselExampleControls' role='button' data-slide='next')
    span.carousel-control-next-icon(aria-hidden='true')
    span.sr-only Next

When I run the localhost:8000 on the chrome browser, I can see image2. but when I click the arrow 'Previous' or 'Next', It doesn't slide.

I use Bootstrap CDN. but I don't know why it doesn't work . :/

Ad

Answer

I think problem is in bootstrap version. Check it adding bootstrap version 3.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" target="_blank" rel="nofollow noreferrer" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
Ad
source: stackoverflow.com
Ad