When you activate the carousel in JS, the code activates both as the same
time. If you want them to work separately, you need to give each a unique
ID, then activate them individually:
$('#myCarousel').carousel({interval:5000})
and
$('#testimonials').carousel({interval:false}) .carousel initiates anything
with that class the same, where as using #<id name> lets each have it's own
settings. Also, if you're referencing bootstrap.min.js, you shouldn't need
all the others too. The main js file should include all the components.
On Wednesday, April 24, 2013 9:27:23 PM UTC+1, Rich Leach wrote:
>
> I thought this would be important:
>
> I'm making these script calls at the bottom of my page to facilitate load
> times; the carousel code is above these script calls on the page.
>
> <script src="http://code.jquery.com/jquery-latest.js";></script>
> <!-- Le javascript ================================================== -->
> <!--
> Placed at the end of the document so the pages load faster --> <script src
> ="/default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap.min.js<http://svr2.tomboytools.us/default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap.min.js>
> "></script> <script type="text/javascript" src="
> http://platform.twitter.com/widgets.js";></script> <script src="
> /default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-transition.js<http://svr2.tomboytools.us/default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-transition.js>
> "></script> <script src="
> /default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-alert.js<http://svr2.tomboytools.us/default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-alert.js>
> "></script> <script src="
> /default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-modal.js<http://svr2.tomboytools.us/default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-modal.js>
> "></script> <script src="
> /default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-scrollspy.js<http://svr2.tomboytools.us/default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-scrollspy.js>
> "></script> <script src="
> /default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-tab.js<http://svr2.tomboytools.us/default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-tab.js>
> "></script> <script src="
> /default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-tooltip.js<http://svr2.tomboytools.us/default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-tooltip.js>
> "></script> <script src="
> /default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-popover.js<http://svr2.tomboytools.us/default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-popover.js>
> "></script> <script src="
> /default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-button.js<http://svr2.tomboytools.us/default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-button.js>
> "></script> <script src="
> /default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-collapse.js<http://svr2.tomboytools.us/default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-collapse.js>
> "></script> <script src="
> /default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-carousel.js<http://svr2.tomboytools.us/default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-carousel.js>
> "></script> <script src="
> /default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-typeahead.js<http://svr2.tomboytools.us/default/includes/themes/MuraBootstrap/bootstrap/js/bootstrap-typeahead.js>
> "></script> <script type="text/javascript"> $('.carousel').carousel({
> interval:
> 5000 }) </script> </body> </html>
>
> Hope this helps.
>
> Rich
>
>
>
>
>
>
> On Wednesday, April 24, 2013 1:52:26 PM UTC-6, Rich Leach wrote:
>>
>> ... oh, in case you're wondering I'm working in ColdFusion so the double
>> pound/hash signs ("##") are needed to escape the pound signs in the anchor
>> tags.
>>
>> Rich
>>
>>
>>
>> On Wednesday, April 24, 2013 1:49:27 PM UTC-6, Rich Leach wrote:
>>>
>>> Hi
>>>
>>> I already have 1 carousel on a web page (working nicely) and I need a
>>> second, smaller carousel that I would like to pause on page load. The
>>> problem is that when the page loads the second carousel starts rotating.
>>> It's a simple carousel, I'm sure I'm just missing a command somewhere
>>> but for the life of me I can't debug it.
>>>
>>> The code for the second carousel is below (I named the first carousel
>>> "myCarousel" in case you were wondering ;-) )
>>>
>>> <div class="carousel slide" id="testimonials" style="margin-top:-10px;
>>> padding:10px; height:120px; border:thin solid silver;" data-pause="true">
>>> <div class="carousel-inner">
>>> <div class="item active">
>>> <div>
>>> This is item 1.
>>> </div>
>>> </div>
>>>
>>> <div class="item">
>>> This is item 2.
>>> </div>
>>>
>>> <div class="item">
>>> This is item 3.
>>> </div>
>>> </div>
>>>
>>> <a href="##testimonials" class="carousel-control left"
>>> data-slide="prev" style="margin-left:-70px;">«</a> <a
>>> href="##testimonials" class="carousel-control right" data-slide="next"
>>> style="margin-right:-70px;">»</a>
>>> </div>
>>>
>>> Any ideas on how I make this carousel stop automatically rotating?
>>>
>>> Thanks in advance,
>>>
>>> Rich
>>>
>>
--
You received this message because you are subscribed to the Google Groups
"twitter-bootstrap" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
