Website:
Issue: I am attempting to integrate the javascript slide.bs.carousel into my code in such a way that the caption appears a few seconds after the image loads in the slideshow. I have inserted the code for 'slide.bs.carousel' within a script tag before the closing body tag instead of placing it in a separate JS file. However, it does not seem to be functioning correctly as the caption still appears simultaneously with the picture.
Attempted Solution: http://jsfiddle.net/fuhs3smx/
It seems that Jsfiddle (which is new to me) is not rendering it properly, hence, I have provided the link to the website for reference so you can understand what I am trying to achieve.
The question here is, where should I exactly place the script for 'slide.bs.carousel'? Everything seems fine to me, but I suspect that the script may be incorrectly placed.
<div id="carousel-example-generic" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators -->
...
...
</div>
UPDATE: Upon including bootstrap.min.js, I encountered the following error message while inspecting the dev tools:
Uncaught TypeError: undefined is not a function
carouselContainer.carousel({
interval: slideInterval,
cycle: true,
pause: "hover"
}).on('slid.bs.carousel', function() {
toggleCaption();
});
What could this error mean? Perhaps there's a typo or the placement of the script is incorrect.