Bootstrap Carousel with WP Customizer Choices

carousel-html-wp.html

<!-- bootstrap carousel -->

    <div id="manlyCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#manlyCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#manlyCarousel" data-slide-to="1"></li>
        <li data-target="#manlyCarousel" data-slide-to="2"></li>
        <li data-target="#manlyCarousel" data-slide-to="3"></li>
        <li data-target="#manlyCarousel" data-slide-to="4"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="<?php echo get_theme_mod( 'slide_1_img' ); ?>" alt="<?php echo get_theme_mod( 'slide_1_headline' ); ?>">
          <div class="container">
            <div class="carousel-caption">
              <h1 id="headline-1"><?php echo get_theme_mod( 'slide_1_headline' ); ?></h1>
              <span id="slide-text-1"><?php echo get_theme_mod( 'slide_1_text' ); ?></span>
              <a href="<?php echo get_theme_mod( 'slide_1_button_link' ); ?>"><button><?php echo get_theme_mod( 'slide_1_button_text' ); ?></button></a>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="second-slide" src="<?php echo get_theme_mod( 'slide_2_img' ); ?>" alt="<?php echo get_theme_mod( 'slide_2_headline' ); ?>">
          <div class="container">
            <div class="carousel-caption">
              <h1 id="headline-2"><?php echo get_theme_mod( 'slide_2_headline' ); ?></h1>
              <span id="slide-text-2"><?php echo get_theme_mod( 'slide_2_text' ); ?></span>
              <a href="<?php echo get_theme_mod( 'slide_2_button_link' ); ?>"><button><?php echo get_theme_mod( 'slide_2_button_text' ); ?></button></a>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="<?php echo get_theme_mod( 'slide_3_img' ); ?>" alt="<?php echo get_theme_mod( 'slide_3_headline' ); ?>">
          <div class="container">
            <div class="carousel-caption">
              <h1 id="headline-3"><?php echo get_theme_mod( 'slide_3_headline' ); ?></h1>
              <span id="slide-text-3"><?php echo get_theme_mod( 'slide_3_text' ); ?></span>
              <a href="<?php echo get_theme_mod( 'slide_3_button_link' ); ?>"><button><?php echo get_theme_mod( 'slide_3_button_text' ); ?></button></a>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="fourth-slide" src="<?php echo get_theme_mod( 'slide_4_img' ); ?>" alt="<?php echo get_theme_mod( 'slide_4_headline' ); ?>">
          <div class="container">
            <div class="carousel-caption">
              <h1 id="headline-4"><?php echo get_theme_mod( 'slide_4_headline' ); ?></h1>
              <span id="slide-text-4"><?php echo get_theme_mod( 'slide_4_text' ); ?></span>
              <a href="<?php echo get_theme_mod( 'slide_4_button_link' ); ?>"><button><?php echo get_theme_mod( 'slide_4_button_text' ); ?></button></a>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="fifth-slide" src="<?php echo get_theme_mod( 'slide_5_img' ); ?>" alt="<?php echo get_theme_mod( 'slide_5_headline' ); ?>">
          <div class="container">
            <div class="carousel-caption">
              <h1 id="headline-5"><?php echo get_theme_mod( 'slide_5_headline' ); ?></h1>
              <span id="slide-text-5"><?php echo get_theme_mod( 'slide_5_text' ); ?></span>
              <a href="<?php echo get_theme_mod( 'slide_5_button_link' ); ?>"><button><?php echo get_theme_mod( 'slide_5_button_text' ); ?></button></a>
            </div>
          </div>
        </div>
      </div>
    </div><!-- end of carousel -->