Conflict with Twitter Bootstrap Carousel

[Joshpho]

Hi guys,

I'm trying to implement FitText for a header on my Twitter Bootstrap theme. Unfortunately, its script seems to prevent the carousel from working. Here are the two scripts I'm working with:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.carousel').carousel({interval: 5000});
  });
</script>  

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
            $(document).ready(function() { 
    $("#holzheader").fitText(1.2, { minFontSize: '40px', maxFontSize: '140px' });
            });
</script>  

(When I use the FitText script, it seems to be preventing the carousel from working.)

The only issue I see would be that they use different jquery versions--but since each script only works with their own respective versions, I'm not sure how I'd fix it. Notably, I'm still new to this stuff, so maybe I'm missing something obvious. Here is my site for reference:

http://joshuaholz.site40.net/

(the background images should be rotating, but the carousel script isn't working so it's just a static image)

Thanks for any help!

[davatron5000]

When I open Web Inspector, I get the following error:

Uncaught TypeError: Object [object Object] has no method 'carousel' 

This means that "jQuery doesn't have the Carousel plugin". The most likely problem is that you have 2 versions of jQuery being loaded. You only need one jQuery. I bet if you remove that line, it'll work.

For maximum success, I'd recommend running fitText BEFORE you apply a carousel. Bundling your JS is super helpful in debugging. Make sure you don't repeat yourself. Your final JS would resemble the following:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#holzheader").fitText(1.2, { minFontSize: '40px', maxFontSize: '140px' });
    $('.carousel').carousel({interval: 5000});
  });
</script>  

There doesn't appear to be a problem with FitText, you're having a problem with implementation. We recommend reaching out to people on StackOverflow for answers about your particular implementation, if you do indeed think you've found a bug, please report that issue here.