#

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.

Note:

We use Bootstrap 5 in our packages. You can update your code to match your own framework, styles, or preferences as needed. For customization options and advanced features, refer to the Bootstrap Carousel documentation.

# 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 Websites > example.com > web files > content

Create a folder called hero
In the hero folder, create a new code file named hero-slider.tpl

Add the hero code using the example template provided below.

hero-slider.tpl
<div id="home-slider" class="carousel slide carousel-fade">
  <div class="carousel-inner">
    [repeater id="" limit="0, 3" order="start_time asc"]
      <div style="background: url([get_asset_file_url id={{slider_image}}]) center/cover; height: 420px;" class="carousel-item d-flex align-items-center[cond type='is' subject='{{index}}' value='0'] active[/cond]" 
        [is_set value='slider_image_alt_tag']
          title="{{slider_image_alt_tag}}"
        [/is_set]
        [is_empty value='slider_image_alt_tag']
          title="{{event_title}}"
        [/is_empty]
      >
        <div class="container position-relative">
          <div class="row">
            <div class="col-lg-9 col-xl-8 col-xxl-6">
              <div class="bg-white p-5 rounded text-start">
                <p class="h1 fw-bold">{{event_title}}</p>
                <p class="lead mt-3 fw-normal">{{slider_intro}}</p>
                <div class="d-flex mt-sm-2 mt-3 justify-content-between">
                  [cond type="is_not" subject="{{slider_link_external}}" value="0"] 
                  <a href="{{slider_link}}" class="btn btn-primary d-flex align-items-center justify-content-center text-white" target="_blank" rel="noopener noreferrer">{{slider_button_text}}</a>
                  [/cond]
                  [cond type="is" subject="{{slider_link_external}}" value="0"] 
                  <a href="{{slider_link}}" class="btn btn-primary d-flex align-items-center justify-content-center text-white">{{slider_button_text}}</a>
                  [/cond]
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    [/repeater]
  </div>
  
  <button class="carousel-control-prev" type="button" data-bs-target="#home-slider" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#home-slider" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Important!

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

Click Publish.
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.
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.

Note:

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