Site icon Hip-Hop Website Design and Development

Bootstrap slider not working

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>