Carousel Sample Code

  • Hi,

    I’m running into issues trying to get the carousel to work by using sample code on https://getbootstrap.com/docs/4.0/components/carousel/. It displays OK except the animations don’t work. Upon clicking the controls, it throws errors “Uncaught TypeError: Cannot read property ‘offsetWidth’ of undefined at Carousel.slide yadayadayada”. I have googled for a bit and people talks about the ‘active’ class and whatnot, didn’t change a thing for me. Someone said about delaying the script to after the elements have been loaded, I tried this, then it indicated that jQuery isn’t loaded for some reason. The following is my test code placed on home as a static page, would appreciate it if you can shed some light on it! Or share the source code to your demo page, I think that helps a lot too… I’m using the child theme btw.

    —
    <div id=”carouselExampleIndicators” class=”carousel slide”>

      <li data-target=”#carouselExampleIndicators” data-slide-to=”0″ class=”active”>
      <li data-target=”#carouselExampleIndicators” data-slide-to=”1″>
      <li data-target=”#carouselExampleIndicators” data-slide-to=”2″>

    <div class=”carousel-inner”>
    <div class=”carousel-item active”>
    <img class=”d-block w-100″ src=”/wp-content/uploads/2019/08/header.jpg
    ” alt=”First slide”>
    <div class=”carousel-caption d-none d-md-block”>
    <h5>Caption Image 1</h5>
    <p>This is description for image 1</p>
    </div>
    </div>
    <div class=”carousel-item”>
    Second slide
    </div>
    <div class=”carousel-item”>
    <img class=”d-block w-100″ src=”/wp-content/uploads/2019/08/header2.jpg
    ” alt=”Third slide”>
    </div>
    </div>

    <span class=”carousel-control-prev-icon” aria-hidden=”true”></span>
    <span class=”sr-only”>Previous</span>


    <span class=”carousel-control-next-icon” aria-hidden=”true”></span>
    <span class=”sr-only”>Next</span>

    </div>
    <script type=”text/javascript”>
    $(‘.carousel’).carousel()
    </script>`

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Afterimage Designs

    (@afterimagedesigns)

    Hi @jzmpeg,

    Thanks for using our theme. I would suggest to check this page https://getbootstrap.com/docs/4.0/components/carousel/. This will help you understand how Bootstrap 4 carousel works. If the link above doesn’t work on your end, can you please add a site url or the page you’re working on?

    I will be waiting for your feedback.

    Thread Starter jzmpeg

    (@jzmpeg)

    Thanks for the reply, that’s the exact link I used and posted in my original message. The site is on my local machine so I can’t give access without tampering your hosts file. If it works as the example, I’ll keep fiddling.

    Theme Author Afterimage Designs

    (@afterimagedesigns)

    Hi @jzmpeg,

    If you still have trouble on making the slider using bootstrap you could add the code snippet here. Just use the code tag on this editor for me to properly understand. Thanks.

    I will be waiting for your feedback.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Carousel Sample Code’ is closed to new replies.