#

Hero Slider

Create stunning hero sliders that captivate visitors and showcase your most important content.

Customize each slide with images, text, buttons, and links to match your brand perfectly. Manage multiple slides effortlessly and keep your homepage content fresh and engaging.

# Prerequisites

Have a Solodev CMS.
Have a Website.
Have a Slider Plugin. Like Slick, Flexslider, or Bootstrap Carousel.

Note:

For step-by-step instructions on adding a Module in your CMS, please visit Add a Module.

# Step-by-Step Setup Guide

These steps will guide you through the process of installing the Hero Slider Module and getting it live on your page.

Navigate to Modules

In your CMS dashboard, click Modules in the left navigation menu
Click the Add Module button

Add the module

Give your hero slider module a name
Select from the three options:
- Datatable: Creates a simple data table structure
- Module: Builds a custom module from scratch
- Package: Installs a pre-built module from a zip file
For the purpose of this tutorial, select Package: and use this zip file .
Click Submit.

Note:

The module includes pre-built slides that you can personalize by editing the module content.

Navigate to web files > content and create a new code file in your desired location.
Add the hero slider HTML code using the example template provided below.

hero-slider.tpl
[repeater id="" limit="0,1"]
  <div class="text-center bg-primary py-2">
    <div class="container">
      [is_set value="{{alert_link}}"]
        [cond type="is" subject="{{alert_link_external}}" value="1"]
          <a href="{{alert_link}}" class="text-white" target="_blank" rel="noopener noreferrer">{{event_title}}</a>
        [/cond]
        [cond type="is_not" subject="{{alert_link_external}}" value="1"]
          <a href="{{alert_link}}" class="text-white">{{event_title}}</a>
        [/cond]
      [/is_set]
      
      [is_empty value="{{alert_link}}"]
        <span class="text-white">{{event_title}}</span>
      [/is_empty]
    </div>
  </div>
[/repeater]

Important!

You need to add the ID number of your hero slider module to the repeater shortcode within the id="" attribute.

Open your homepage index.stml or the desired page where you want to add the hero slider.
Insert your hero-slider file into the page.

Note:

To learn more about shortcodes and how they work, visit our shortcodes documentation.

Click Publish.
Go to your website and refresh the page to see your hero slider in action.

# Support

Support for Hero Slider Module is handled directly through Solodev's global help desk. For more information regarding support queries, go to www.solodev.com.