how to put dot indicater outsid of carosoul

Question

I adding a carosoul in my page and carosoul working fine

 

but i want to add dot control means when click the dot then carousol image move

 

current output: 

 

I want to add this type of dots control outside of the carousel

 

 

Code:

<style>
    .carousel {
        background: #2f4357;
        margin-top: 20px;
    }
    .carousel-item {
        text-align: center;
        min-height: 280px;
    }
    .gallaryparegraph{
        padding-top:45px;
        line-height:25px;
        text-align:center;
        font-size:16px;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="container-lg my-3">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                     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 carousel items
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="https://images.unsplash.com/photo-1489824904134-891ab64532f1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2592&q=60%202592w" style="width:300px;height:300px;" alt="First Slide">
                        </div>
                        <div class="carousel-item">
                            <img src="https://images.unsplash.com/photo-1489824904134-891ab64532f1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2592&q=60%202592w" style="width:300px;height:300px;"   alt="Second Slide">
                        </div>
                        <div class="carousel-item">
                            <img src="https://images.unsplash.com/photo-1489824904134-891ab64532f1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2592&q=60%202592w" style="width:300px;height:300px;"  alt="Third Slide">
                        </div>
                    </div>
                     Carousel controls
                    <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
                        <span class="carousel-control-prev-icon accordion"></span>
                    </a>
                    <a class="carousel-control-next" href="#myCarousel" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            content
        </div>
    </div>
</div>