Adding a Hero Slider to your Homepage Using Slick Slider


An effective homepage slider provides users with the most valuable content on your site aligned with your goals and prompts them to take action. In Part I of our Slick Slider Series, we provide you with the code you need to easily add a hero slider to your homepage using the robust and mobile responsive Slick Slider by Ken Wheeler.

Adding a Hero Slider to your Homepage Using Slick Slider
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.

We recommend including a Call-to-Action (CTA) in the form of a button such as “Learn More”, “Download”, or “Buy Now” as well as confident and actionable messaging to clarify the intent of your website.

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

hero-slick-slider.css

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.

For more information on the power of using Solodev Shortcodes, visit our in-depth Solodev Documentation. To sign up for Solodev CMS today, visit solodev.com/pricing!

Author

Matthieu McClintock
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.