Working Bootstrap Carousel Conversion to WP – Technical Questions

I had a similar situation recently, making a Bootstrap carousel dynamic.

Here’s my functions.php code for that:

//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');

And for the template file:

  <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="https://wordpress.stackexchange.com/questions/312817/<?php echo get_theme_mod("home-slider-first-image');?>" alt="Sinan" >
      </div>

      <div class="item header-image">
        <img  src="https://wordpress.stackexchange.com/questions/312817/<?php echo get_theme_mod("home-slider-second-image');?>" alt="Sinan" >
      </div>

      <div class="item header-image">
        <img src="https://wordpress.stackexchange.com/questions/312817/<?php echo get_theme_mod("home-slider-third-image');?>" alt="Sinan" >
      </div>
    </div>

    <!-- Left and right controls -->

  </div>

I bet there are more elegant ways to do this, but I’m new to WordPress custom theme development as well and this did the trick for me.

Edit: You can make other stuff editable, for instance the alt attribute, add captions to the slides, etc. using the same logic by adding more settings in the functions file and replacing HTML hard-coded attribute values with appropriate PHP tags which will appear in the customizer.

Hope this helps!