I have a carousel on my site that was created with Twitter Bootstrap. I'm not sure why it does not start automatically though when the page loads, it does not initiate until you click on the arrow to advance to the next slide, then the timer kicks in. From the bootstrap documentation it says it can be initialised with this object, but where do i put this?
$('.carousel').carousel({
interval: 2000
})
My site has two javascript files, jquery-1.7.2.min.js, and bootstrap.min.js.
Assuming you have everything else in place, try adding this before the closing body tag:
<script type='text/javascript'>
$(document).ready(function() {
$('.carousel').carousel({
interval: 2000
})
});
</script>
I had your same problem and found the solution; As we both put the javascripts at the end of the page, the calling of the function must be put after them:
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
var $ = jQuery.noConflict();
$(document).ready(function() {
$('#myCarousel').carousel({ interval: 3000, cycle: true });
});
</script>
http://twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/
Thought I would add something about bootstrap 3 working in angular.
Depending on how extensive your application is within Angular, there could be a slight delay in when the carousel loads. For instance, I have the carousel loading as a template, which loads slightly after the document loads, so therefore, I had to add a slight timeout for the code to kick start the carousel.
<div class="mWeb-container" ng-controller="mWebCtrl">
<div ng-include="nav_tpl" ng-hide="print_layout"></div>
<div ng-include="carousel_tpl" ng-hide="print_layout"></div>
<div ng-include="breadcrumbs_tpl" ng-hide="print_layout"></div>
<div ng-view=""></div>
<div ng-include="comments_tpl" ng-hide="print_layout"></div>
<div ng-include="footer_tpl" ng-hide="print_layout"></div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="angular/scripts/vendor/bootstrap.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
var mCarouselTO = setTimeout(function(){
$('#Carousel').carousel({
interval: 3000,
cycle: true,
}).trigger('slide');
}, 2000);
var q = mCarouselTO;
});
-->
</script>
I had the same problem so I found that I missed the data-ride="carousel" from the bootstrap caruosel. Check that in your code. Link to Bootstrap doc
No need for any javascript code, you can set it to auto change using data attribute data-interval="1000"
The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
<div id="carousel-example-generic" class="carousel slide" data-interval="1000" data-ride="carousel">
I've been sitting for months on this, every time I precompiled the assets something wrong went into the assets public/folder so something wasn't working. I needed to copy old assets into the public/assets folder to get it working. For a long time I tried to figure out in which order the imports have to be and which require statements are destroying already working things.
My solution after all this time is, I need to import these:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .
And don't ever put a script, e.g. a start-carousel-script into the application.js file. If I place it into the application.html.erb file like this:
<%= javascript_include_tag "application" %>
<script type='text/javascript'>
$(document).ready(function() {
$('.carousel').carousel({
interval: 3000
})
});
</script>
Everthing works fine. Notice: it hat to be under the application include_tag otherwhise I can't work.
Notice 2: I've got a googlemaps script as well, but it's only(!) imported in the file where the map lives. It's this script:
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=false"></script>
I really hope this helps other people save their time. There are some things that aren't that obvious.
This happened to me to. But - there is an option that is pause: 'hover' which is the default setting.
And this option made my fullscreen slider to stop of course, even on the first slide ;) So please set you pause to false or something else than 'hover'.
Just to add for those of you who are using react, doing the following will trigger the cycle:
componentDidMount(){
this.setState({activeIndex:0})
}
