Title: Carousel Sample Code
Last modified: August 14, 2019

---

# Carousel Sample Code

 *  [jzmpeg](https://wordpress.org/support/users/jzmpeg/)
 * (@jzmpeg)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/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/](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”>
    1.  <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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcarousel-sample-code%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Theme Author [Afterimage Designs](https://wordpress.org/support/users/afterimagedesigns/)
 * (@afterimagedesigns)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/carousel-sample-code/#post-11833588)
 * Hi [@jzmpeg](https://wordpress.org/support/users/jzmpeg/),
 * Thanks for using our theme. I would suggest to check this page [https://getbootstrap.com/docs/4.0/components/carousel/](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](https://wordpress.org/support/users/jzmpeg/)
 * (@jzmpeg)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/carousel-sample-code/#post-11833610)
 * 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](https://wordpress.org/support/users/afterimagedesigns/)
 * (@afterimagedesigns)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/carousel-sample-code/#post-11836920)
 * Hi [@jzmpeg](https://wordpress.org/support/users/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.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/wp-bootstrap-starter/3.3.6/screenshot.
   png)
 * WP Bootstrap Starter
 * [Support Threads](https://wordpress.org/support/theme/wp-bootstrap-starter/)
 * [Active Topics](https://wordpress.org/support/theme/wp-bootstrap-starter/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/wp-bootstrap-starter/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/wp-bootstrap-starter/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [Afterimage Designs](https://wordpress.org/support/users/afterimagedesigns/)
 * Last activity: [6 years, 9 months ago](https://wordpress.org/support/topic/carousel-sample-code/#post-11836920)
 * Status: not resolved