How to dynamic background image in WordPress?

Question

I am trying to develop a WordPress theme. For this, I am developing a shortcode for a slider. The HTML template use background images for the slider. I am using get_template_directory_uri() function to dynamic the images. But using the get_template_directory_uri() function the images do not show. Please help me to solve this problem. My code:-

        <!-- HERO -->
    <div id="home" class="flexslider fullheight color-white">
        <ul class="slides">

            <!-- SLIDE 1 -->
            <li class="bg-black-alfa-40" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/images/module-13.jpg)">
                <!-- HERO TEXT -->
                <div class="hero-caption">
                    <div class="hero-text">

                        <div class="container">

                            <div class="row">
                                <div class="col-sm-12 text-center">
                                    <h1 class="montserrat text-uppercase text-super-xl m-b-50 m-t-70">Welcome to<br>Neomax</h1>
                                    <p>Donec pede justo fringilla vel aliquet nec vulputate eget<br>arcu. In enim justo rhoncus ut imperdiet.</p>
                                    <div class="btn-list m-t-45">
                                        <a href="#" class="btn btn-circle btn-white btn-lg">Purchase theme</a>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                <!-- END HERO TEXT -->
            </li>
            <!-- END SLIDE 1 -->

            <!-- SLIDE 2  -->
            <li class="bg-black-alfa-70" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/images/module-2.jpg)">
                <!-- HERO TEXT -->
                <div class="hero-caption">
                    <div class="hero-text">

                        <div class="container">

                            <div class="row">
                                <div class="col-sm-12 text-center">
                                    <h1 class="montserrat text-super-xl m-b-70">A Creative<br>Design Studio</h1>
                                    <p>Donec pede justo fringilla vel aliquet nec vulputate eget<br>arcu. In enim justo rhoncus ut imperdiet.</p>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                <!-- END HERO TEXT -->
            </li>
            <!-- END SLIDE 2 -->

            <!-- SLIDE 3 -->
            <li class="bg-black-alfa-30" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/images/module-3.jpg)">
                <!-- HERO TEXT -->
                <div class="hero-caption">
                    <div class="hero-text">

                        <div class="container">

                            <div class="row">
                                <div class="col-sm-12 text-center">
                                    <h1 class="montserrat text-super-xl m-b-70">Discover<br>True Power</h1>
                                    <p>Donec pede justo fringilla vel aliquet nec vulputate eget<br>arcu. In enim justo rhoncus ut imperdiet.</p>
                                    <div class="btn-list m-t-45">
                                        <a href="#" class="btn btn-circle btn-outline btn-white btn-lg">Purchase theme</a>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                <!-- END HERO TEXT -->
            </li>
            <!-- END SLIDE 3 -->
        </ul>
    </div>
    <!-- END HERO -->

}