Bootstrap 3 Carousel — JS not loading?

  • Good Morning,
    The client wanted an exact replica of their website in WordPress, to use for their New/Blog. I used a blank theme (HTML5 Blank) and took the code from the Bootstrap 3 based website and was able to add the header, footer, and all of the styling. My problem arises if you shrink the website down to mobile size (or view on your mobile phone), the bottom “menu” is a bootstrap carousel. When it first loads, the first icon is shifted to the left. After a few seconds, it resolves. I thought maybe there was a delay in loading the boostrap JS, so I tried moving that from the footer to the header, but that didn’t solve the problem.

    Any suggestions?
    Thank you in advance.

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

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    A rather wild guess, but I think the delay might be because of the time required to fetch all the SVG files and render them. Until this is done for all icons, the browser does not know how to properly space the images, resulting in the temporary pile up on the left. I suggest you try inlining all the SVG data instead of relying on img file references. Even if this does not fix the issue, it’s a good thing to do to optimize page loading.

    There are a few script errors that show up in the console that should be resolved. These too can slow down (in other situations stop) execution of the carousel script. There are a number of file requests that come back 404. Check your browser’s networking developer tool. Again, these can slow things down, preventing the carousel script from executing right away.

Viewing 1 replies (of 1 total)
  • The topic ‘Bootstrap 3 Carousel — JS not loading?’ is closed to new replies.