Liven up the Boss Pro home hero area with a carousel.
I am working on a site for a stylist, creative director, TV and radio contributor. The site is being based on the Boss Pro theme, using the Genesis framework. As we couldn’t decide on a suitable hero image I implemented a carousel featuring some photo shoot images. I generally avoid sliders and carousels because they can slow a site down but here, as client is in the fashion industry, striking images are important.
Slick Carousel
My favourite carousel is Slick carousel. It is easy to implement with many options, including being able to change the layout as specified breakpoints.
I load the CSS and JS files from the recommended CDN and add the appropriate initialisation code into <head>. For this site I hard coded the list of images though that can be easily changed in the future, perhaps with a CMB2 options page.
Replacing the Hero Image
The hero image is a background for the “Front Page 1” widget area. Leaving this widget area empty prevents it from displaying so I didn’t need any code to achieve this.
The front page widgets are added via the ‘genesis_before_content_sidebar_wrap‘ hook with a priority of 15. I added the carousel markup before the widgets by using the same hook but with a lower priority.
Front Page 1 widget area uses a simple text widget and then uses a lot of top and bottom padding to make it tall enough for the background image to cover the browser window. I included a div with text that I positioned absolutely on top of the carousel so it looked similar to the original.
It always amazes me the flexibility of Genesis as a whole, nice work here Damien.