style the bs slider content

css/custom-editor-style.css

@@ -6860,6 +6860,9 @@ button,
 aside.widget {
   clear: both; }
 
+#wrapper-hero .carousel-inner .textwidget {
+  width: 100%; }
+
 /*!
  *  Font Awesome 4.5.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)

css/theme.css

@@ -6860,6 +6860,9 @@ button,
 aside.widget {
   clear: both; }
 
+#wrapper-hero .carousel-inner .textwidget {
+  width: 100%; }
+
 /*!
  *  Font Awesome 4.5.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)

inc/widgets.php

@@ -71,7 +71,7 @@ if ( ! function_exists( 'understrap_widgets_init' ) ) {
 			'name'          => __( 'Hero Slider', 'understrap' ),
 			'id'            => 'hero',
 			'description'   => 'Hero slider area. Place two or more widgets here and they will slide!',
-			'before_widget' => '<div class="carousel-item">',
+			'before_widget' => '<div class="carousel-item active">',
 			'after_widget'  => '</div>',
 			'before_title'  => '',
 			'after_title'   => '',

sass/understrap/understrap.scss

@@ -126,3 +126,7 @@ button,
 
 // Clearing after widget
 aside.widget{clear:both;}
+
+#wrapper-hero .carousel-inner .textwidget {
+width:100%;
+}

sidebar-hero.php

@@ -20,14 +20,25 @@
 			</div>
 
 			 <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+			    
 			    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+			    
 			    <span class="sr-only">Previous</span>
+			 
 			 </a>
+			 
 			 <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+			    
 			    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+			    
 			    <span class="sr-only">Next</span>
+			  
 			</a>
 
 		</div><!-- .owl-carousel -->
 
 <?php endif; ?>
+
+<script>
+jQuery( ".carousel-item" ).first().addClass( "active" );
+</script>