I wanna to Create two Carousel beside each other, How Can I do that? (I've searched whole day but I couldn't find anything) : [How can I create two Carousel beside each other?][1]


  [1]: https://i.stack.imgur.com/Dv7PB.png

How can I create two Carousel beside each other? It seems Its impossible mission but because Im beginner I hope there is a simple solution. Ive searched whole day but It seems there is no one to try this kind of stuff 


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->


    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div id="Carousel" class="carousel slide">

                <ol class="carousel-indicators">
                    <li data-target="#Carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#Carousel" data-slide-to="1"></li>
                </ol>

                <!-- Carousel items -->
                <div class="carousel-inner">

                    <div class="item active">
                        <div class="row">
                            <div class="col-md-6"><a href="images/one.jpeg" target="_blank" class="thumbnail"><img src="images/two.jpeg" class="img-responsive" alt="Image" style="max-width:100%;"></a></div>
                            <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" alt="Image" style="max-width:100%;"></a></div>
                        </div><!--.row-->
                    </div><!--.item-->

                    <div class="item">
                        <div class="row">
                            <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" alt="Image" style="max-width:100%;"></a></div>
                            <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" style="max-width:100%;"></a></div>
                        </div><!--.row-->
                    </div><!--.item-->

                </div><!--.carousel-inner-->

                <a data-slide="prev" href="#Carousel" class="left carousel-control black-link">‹</a>
                <a data-slide="next" href="#Carousel" class="right carousel-control black-link">›</a>

            </div><!--.Carousel-->

        </div> <!--.col-md-8-->
    </div> <!--.row-->

    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div id="Carousel2" class="carousel slide">

                <ol class="carousel-indicators">
                    <li data-target="#Carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#Carousel" data-slide-to="1"></li>
                </ol>

                <!-- Carousel items -->
                <div class="carousel-inner">

                    <div class="item active">
                        <div class="row">
                            <div class="col-md-6"><a href="images/one.jpeg" target="_blank" class="thumbnail"><img src="images/two.jpeg" class="img-responsive" alt="Image" style="max-width:100%;"></a></div>
                            <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" alt="Image" style="max-width:100%;"></a></div>
                        </div><!--.row-->
                    </div><!--.item-->

                    <div class="item">
                        <div class="row">
                            <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" alt="Image" style="max-width:100%;"></a></div>
                            <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" style="max-width:100%;"></a></div>
                        </div><!--.row-->
                    </div><!--.item-->

                </div><!--.carousel-inner-->

                <a data-slide="prev" href="#Carousel" class="left carousel-control black-link">‹</a>
                <a data-slide="next" href="#Carousel" class="right carousel-control black-link">›</a>

            </div><!--.Carousel-->

        </div> <!--.col-md-8-->
    </div> <!--.row-->

and maybe I choose incorrect word to search

<!-- end snippet -->

