Twitter Bootstrap Carousel in WordPress not automatically starting

I am trying to get a website running on WordPress, with a customised Twitter Bootstrap theme.

I have been looking around at similar problems with their answers, but I can’t seem to make the carousel on the homepage start automatically. It will start sliding after I click on the left/right arrows, but I think there is still something wrong because even though I set the slide interval to 500, it does not appear to be so. I guess it must be something very basic that I am missing.

Read More

Is it the sequence of the scripts that I am loading (related to functions.php):

<?php 
function wpbootstrap_scripts_with_jquery()
{
    // Register the script like this for a theme:
    wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
?>

How about the

<?php wp_enqueue_script("jquery"); ?>

part in header.php?

Or simply a fundamental error in

<script type="text/javascript">

    $(document).ready(function() {
        $('#myCarousel').carousel({
        interval: 500
        });

        $('#myCarousel').carousel('cycle');

    });

</script>

Thanks in advance for your help.

Related posts

Leave a Reply

2 comments

  1. You have to load bootstrap.js before being able to call carousel() in your inline script.

    <script src="http://thirdwavepower.com/V2/wp-content/themes/wpbootstrap/bootstrap/js/bootstrap.js?ver=3.5.2"></script>
    
    <script type="text/javascript">
        $(document).ready(function() {
            $('#myCarousel').carousel({
                interval: 500
            }); 
            $('#myCarousel').carousel('cycle');
        });
    </script>