Adding a Hero Slider to your Homepage Using Slick Slider

Slick Slider is a widely-used and extremely powerful mobile responsive slider with a breadth of custom configurations, wide range of uses, and robust functionality based on the goals for your website. In Part I of our Slick Slider Series, we will walk you through using Slick Slider to add a hero slider to your homepage using HTML as well as a Solodev Shortcode.

An effective homepage slider ideally provides users with the most valuable content on your site aligned with your goals and prompts them to take action.

This article will provide you with the code you need to easily add a hero slider to your homepage using Slick Slider by Ken Wheeler.

Step 1

Begin with using the HTML below for the slides you would like rotating. Replace the slide text, slide description, and links with the content you'd like. If you are using Solodev to add your Slick Slider, click the Solodev Shortcode tab and use that code instead.

• HTML
• Solodev Shortcode

Step 2

Copy and paste the JavaScript below into a file called slick-bg.js as it will be required to enable your Slick Slider.

Step 3

Download the CSS below and include it in your web page

Step 4

Add the following includes to the header of your HTML file (or Solodev Shortcode Repeater file) to enable Slick Slider.

Now you have all of the tools you need to add a hero image using Slick Slider to your website! Slick Slider's power can oftentimes create a learning curve for developers and our Slick Slider series aims to bypass that curve and put the power of Slick Slider in your hands without the need for a deep dive.

In Part II of our Slick Slider Series, we show you how to add an Infinite Carousel of Client Logos to your Website.