Replace Boss Pro header with carousel - Liven up the Boss Pro home hero area with a carousel. https://www.damiencarbery.com/2019/05/replace-boss-pro-header-with-carousel/

carousel-in-boss-pro.php

<?php
/*
Plugin Name: MK Stylist
Plugin URI: https://www.damiencarbery.com
Description: Customisations of Boss Pro theme for a MariaKellyFashion.com.
Author: Damien Carbery
Version: 0.1
*/


add_action( 'wp_enqueue_scripts', 'mkf_add_slick_slider' );
function mkf_add_slick_slider() {
	// Slick slider for home page.
	if ( is_home() ) {
		wp_enqueue_script( 'slick', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array( 'jquery' ) );
		wp_enqueue_style( 'slick', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css' );
	}
}


// Initialise slick slider on home page.
add_action( 'wp_head', 'mkf_init_slick_slider' );
function mkf_init_slick_slider() {
	if ( ! is_home() ) {
		return;
	}
?>
<script>
jQuery(document).ready(function( $ ) {
	$('#header_slider').slick({
	  centerMode: true,
	  arrows: false,
	  autoplay: true,
	  autoplaySpeed: 5000,
	  slidesToShow: 5,
	  responsive: [
		{
		  breakpoint: 1200,
		  settings: {
			slidesToShow: 3,
		  }
		},
		{
		  breakpoint: 768,
		  settings: {
			slidesToShow: 2,
		  }
		},
		{
		  breakpoint: 480,
		  settings: {
			slidesToShow: 1,
		  }
		}
	  ]
	});
});
</script>
<style>
/* Place the overlay on top of the carousel. */
#slider-wrap { position: relative; }
#slider-overlay { position: absolute; top: 35%; left: 10%; max-width: 500px; }
#slider-overlay h1 { color: #fff; font-size: 50px; text-align: center; text-shadow: 1px 1px 1px; }
@media only screen and (min-width: 800px) {
	#slider-overlay h1 { font-size: 60px; }
}
@media only screen and (min-width: 1200px) {
	#slider-overlay { top: 20%; }
}
</style>
<?php
}


add_action( 'genesis_before_content_sidebar_wrap', 'mkf_header_slider', 13 );
function mkf_header_slider() {
	if ( ! is_home() ) {
		return;
	}
?>
<div id="slider-wrap">
	<div id="header_slider">
		<div><img src="http://www.domain.com/wp-content/uploads/2019/05/slider-1.jpg" /></div>
		<div><img src="http://www.domain.com/wp-content/uploads/2019/05/slider-2.jpg" /></div>
		<div><img src="http://www.domain.com/wp-content/uploads/2019/05/slider-3.jpg" /></div>
		<div><img src="http://www.domain.com/wp-content/uploads/2019/05/slider-4.jpg" /></div>
		<div><img src="http://www.domain.com/wp-content/uploads/2019/05/slider-5.jpg" /></div>
	</div>
	<div id="slider-overlay">
	<h1>Increase <span class="handwritten">brand awareness</span> for <span class="handwritten">success</span></h1>
	</div>
</div>
<?php
}