Add Image Carousel to HSDO Homepage

// paste the entire below code in the homepage promo message section to insert a carosul of images //
    <style>
    
 
 
    .carousel-control {
        position: absolute;
        top: 10%;
        font-size: 40px;
        font-weight: 100;
        line-height: 35px;
        color: #fff;
        text-align: center;
        -webkit-border-radius: 23px;
        -moz-border-radius: 23px;
        border-radius: 23px;
        opacity: .5;
        filter: alpha(opacity=50);
        }
</style>

<div class="container">


  
  	<!-- thumb navigation carousel -->
    <div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs">
        
            <!-- thumb navigation carousel items -->
    </div>

  
    
    <div class="row">
        <div class="col-md-12" id="slider">
            
                <div class="col-md-12" id="carousel-bounding-box">
                    <div id="myCarousel" class="carousel slide">
                        <!-- main slider carousel items -->
                        <div class="carousel-inner">
                            <div class="active item" data-slide-number="0">
                                <img src="https://cdn.shopify.com/s/files/1/1280/2495/files/City_Penguin.jpg?17660159147217756379" width="1203" height="800" style="PADDING-LEFT: 26px ; class="img-responsive">
                            </div>
                           
                            <div class="item" data-slide-number="2">
                              <img src="https://cdn.shopify.com/s/files/1/1280/2495/files/Peace_Angels.jpg?17660159147217756379" width="1203" height="800" style="PADDING-LEFT: 26px ; class="img-responsive">
                              
                            </div>
                            <div class="item" data-slide-number="3">
                              <img src="https://cdn.shopify.com/s/files/1/1280/2495/files/Whales.jpg?17660159147217756379" width="1203" height="800" style="PADDING-LEFT: 26px ; class="img-responsive">
                              
                            </div>
                            
                            <div class="item" data-slide-number="4">
                              <img src="https://cdn.shopify.com/s/files/1/1280/2495/files/Indian_Princess_Raccoon.jpg?17660159147217756379" width="1203" height="800" style="PADDING-LEFT: 26px ; class="img-responsive">
                              </div>
                            

                            <div class="item" data-slide-number="4">
                              <img src="https://cdn.shopify.com/s/files/1/1280/2495/files/Submarine.jpg?17660159147217756379" width="1203" height="800" style="PADDING-LEFT: 26px ; class="img-responsive">
                              </div>


                            <div class="item" data-slide-number="4">
                              <img src="https://cdn.shopify.com/s/files/1/1280/2495/files/Slumber_Blossom_Pink.jpg?17660159147217756379" width="1203" height="800" style="PADDING-LEFT: 26px ; class="img-responsive">
                              </div>

                                
                            <div class="item" data-slide-number="4">
                              <img src="https://cdn.shopify.com/s/files/1/1280/2495/files/Underwater.jpg?17660159147217756379" width="1203" height="800" style="PADDING-LEFT: 26px ; class="img-responsive">
                              </div>
                
                              
                            </div>
                            
                        </div>
                        <!-- main slider carousel nav controls --> 
                        
                    
                        <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>

                        <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
                 
                       
                    </div>
                </div>

        </div>
    </div>
    <!--/main slider carousel-->