Bootstrap slider not working

Question

Bootstrap slider not working

Anna Moors

2022年4月24日 20:01

I have a html bootstrap slider which works fine with captions and everything.I would like to integrate it into my Wp theme (my forst one, so total newbie).I found a code, which seems to helo, but it only shows the three pictures and nothing slides...if I hard code the slider, it works.I understand I can just leave it hard coded, but then it's not really WP ;) THANKS. Here is the code: functions.php - now complete file.

function load_stylesheets()
{

wp_register_style('style', get_template_directory_uri() . '/style.css', array(), 1,'all');

wp_enqueue_style('style');

wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap-4.1.3-dist/css/bootstrap.min.css', array(), 1,'all');

wp_enqueue_style('bootstrap');

wp_register_style('fixedcss', get_template_directory_uri() . '/css/fixed.css', array(), 1,'all');

wp_enqueue_style('fixedcss');

wp_register_style('custom', get_template_directory_uri() . '/custom.css', array(), 1,'all');

wp_enqueue_style('custom');

}

add_action('wp_enqueue_scripts', 'load_stylesheets');


//load scripts

function load_javascript()
{

wp_register_script('custom', get_template_directory_uri() . '/js/custom.js', 'jquery', 1, true);
wp_enqueue_script('custom');

wp_register_script('bootstrapjs', get_template_directory_uri() . '/bootstrap-4.1.3-dist/js/bootstrap.min.js',array('jquery'), 1 , true);
wp_enqueue_script('bootstrapjs');

}
add_action('wp_enqueue_scripts', 'load_javascript');


// normal menue theme support
add_theme_support('menus');

// register menus, =__ is improtant for tansaltions!
register_nav_menus
(

array('top-menu' =__('Top Menu', 'theme')
)

);

//woocommerce theme suport

function customtheme_add_woocommerce_support()
 {
add_theme_support( 'woocommerce' );
}
add_action( 'after_setup_theme', 'customtheme_add_woocommerce_support' );


//Images Slider

    function themename_slider_home_images_setup($wp_customize)
    {
        $wp_customize-add_section('home-slider-images', array(
            'title' = 'Home Slider',
            ));
    
            $wp_customize-add_setting('home-slider-first-image');
        $wp_customize-add_control(
            new WP_Customize_Image_Control(
                $wp_customize,
                'home-slider-first-image',
                array(
                    'label'      = __( 'First Image', 'theme_name' ),
                    'section'    = 'home-slider-images',
                    'settings'   = 'home-slider-first-image'
                )
            )
            );
    
            $wp_customize-add_setting('home-slider-second-image');
        $wp_customize-add_control(
            new WP_Customize_Image_Control(
                $wp_customize,
                'home-slider-second-image',
                array(
                    'label'      = __( 'Second Image', 'theme_name' ),
                    'section'    = 'home-slider-images',
                    'settings'   = 'home-slider-second-image'
                )
            )
            );
    
            $wp_customize-add_setting('home-slider-third-image');
        $wp_customize-add_control(
            new WP_Customize_Image_Control(
                $wp_customize,
                'home-slider-third-image',
                array(
                    'label'      = __( 'Third Image', 'theme_name' ),
                    'section'    = 'home-slider-images',
                    'settings'   = 'home-slider-third-image'
                )
            )
        );
    }
    add_action('customize_register', 'themename_slider_home_images_setup');`

front-page.php:

 div id=myCarousel class=carousel slide data-ride=carousel
!-- Indicators --
ol class=carousel-indicators
  li data-target=#myCarousel data-slide-to=0 class=active/li
  li data-target=#myCarousel data-slide-to=1/li
  li data-target=#myCarousel data-slide-to=2/li
/ol

!-- Wrapper for slides --
div class=carousel-inner
  div class=item active
    img src=?php echo get_theme_mod('home-slider-first-image');? alt=caption3! 
   
  /div

  div class=item header-image
    img  src=?php echo get_theme_mod('home-slider-second-image');? alt=caption2 
  /div

  div class=item header-image
    img src=?php echo get_theme_mod('home-slider-third-image');? alt=I am a caption 
  /div
/div

Topic twitter-bootstrap wp-enqueue-script jquery theme-development customization Wordpress

Category Web

Anna Moors · Accepted Answer · 2020年8月21日 16:44

1

Anna Moors answered at 2020年8月21日 16:44

I added

wp_deregister_script('jquery');

to my funcitons.php and now it works, I suppose there must have been a conflict with my enqueued jquery.

Suresh Shinde · Accepted Answer · 2020年8月18日 10:49

Check with bootstrap & Jquery dependency file enqueue.

You need to load your bootstrap style & Jquery by the action wp_enqueue_style and wp_enqueue_script.

Example: In functions.php

    function my_scripts() {

   wp_enqueue_style('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js', array( 'jquery' ),'',true );
wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', array( 'jquery' ),'',true );
wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array( 'jquery' ),'',true );

}

add_action( 'wp_enqueue_scripts', 'my_scripts' );

Also in your custom js you need to put this $('.carousel').carousel();

TomC · Accepted Answer · 2020年8月18日 09:03

You've tagged your question correctly with wp_enqueue_script but it doesn't appear in your code so you are probably missing the jQuery library and bootstrap by the looks of it.

Try adding the following:

add_action('wp_enqueue_scripts', 'wp_add_jquery');

function wp_add_jquery () {
    wp_register_script( 'my_jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
    // Add your other scripts here (bootstrap, etc.)

}

Bootstrap slider not working

About