Create a Homepage Slider

A homepage slider allows you display a single hero image or rotating display of images. A hero image is usually the first thing a website visitor sees and can include a learn more link or other CTA in the form of a button. This is good for feeding users the most valuable content on your site, and prompting them to take action. The following steps will show you how to create a homepage slider module from scratch in Solodev.

This tutorial utilizes Slick Slider by Ken Wheeler. You can use any slider you want, but will have to ensure you include all of the necessary resources, both in the CMS itself and in the template files.


Adding Homepage Slider Module

All modules should be built inside the managers folder under /web files/managers/ to make them easy to find and access. Each module should have its own folder within this directory. Click here for more information on how to add a folder.

Step 1

Open the folder to which you want to add your homepage slider module. Hover over the Add button and select Calendar.

Add Calendar


Step 2

Name your calendar and select 'Custom' from the type of calendar dropdown. You need to create a form using one of the three following methods:

  • Table schema
  • Select a form previously created with the form builder
  • Upload an HTML form

Click here to learn more about creating a calendar and adding forms.

Homepage Slider

For purposes of this tutorial, we have provided the form code. The code below will add the appropriate fields to the module. First you will need to save this code to your computer. Either use a text editor such as Sublime, or Text Edit. Save the file as a simple text document with .tpl at the end of the file name such as "homepage-slider-form.tpl".

Form.tpl

<div class="row">
  <div class="col-md-6 form-group">
    <label class="control-label" for="slider_link">Link</label>
    <input class="form-control" id="slider_link" name="slider_link" type="url" pattern="(https?://|//|/).\S+">
  </div>
  <div class="col-md-6 form-group">
    <label class="control-label" for="slider_image">Image (Recommended minimum width is 1920px)</label>
    <input id="slider_image" name="slider_image" type="file">
  </div>
</div>

<div class="form-group">
  <label class="control-label" for="slider_description">Slide Text</label>
  <textarea class="form-control wysiwyg" id="slider_description" name="slider_description"></textarea>
</div>

<style>
  label { font-weight: 700; }
</style>

Click on Upload Form and select the file you just saved. Then click Submit.

In doing so, the form you've just uploaded will automatically create the table schema for the module and allow you to add entries.


Adding Slides

Now that you have created your homepage slider, its time to add slides.

Step 1

Open your homepage slider manager by clicking on that module in the left hand file tree. In the actions menu select Add Entry.


Step 2

Add an image, header text, button text, and the URL to which you would like the button to go (if your slider uses a button). Once finished filing out the fields click Save.


Upload Slider Resources

In order to render the slider and ensure all of the desired functionality is implemented, it is necessary to add any resources to Solodev CMS. Generally, these resources can include JavaScript, jQuery, and CSS files, however it varies from slider to slider. With Slick Slider, you only have to upload the following JavaScript file.

Step 1

Save slider-bg.js to your local machine. This is a primary file which allows the slider to work. For your convenience, the source code for this file is below:

slider-bg.js

$(document).ready(function() {
if ($('[data-background]').length > 0) {
$('[data-background]').each(function() {
var $background, $backgroundmobile, $this;
$this = $(this);
$background = $(this).attr('data-background');
$backgroundmobile = $(this).attr('data-background-mobile');
if ($this.attr('data-background').substr(0, 1) === '#') {
return $this.css('background-color', $background);
} else if ($this.attr('data-background-mobile') && device.mobile()) {
return $this.css('background-image', 'url(' + $backgroundmobile + ')');
} else {
return $this.css('background-image', 'url(' + $background + ')');
}
});
}
});

Step 2

Upload the JavaScript file to Solodev. Open the same folder into which you added the homepage slider manager. Hover over the Add button and click File. Click on the Folder Icon to the right of the "Name" field so that you can browse your computer for the file. Once you have located the file, select it, and then click Submit.


Adding Repeater

The repeater template will generate the code to repeat all slides. This generally goes into the page file, but it ultimately depends on the website structure. For this case, it will go into the page file.

Step 1

Open the same folder into which you added the homepage slider manager. Hover over the Add button and click File.


Step 2

Name the file and add the extension .tpl at the end of the file name.

The file name should be written in lowercase with no spaces. You can add a hyphen (-) between words. Click here for more information on adding a file.

We need to add the code to make our slide entries appear.

For the purposes of this tutorial, however, we have provided a repeater template for this tutorial. Add this code to the folder that contains the homepage slider module you created. Copy the code below and make the edit that is required to pull the ID of the correct module.

Repeater.tpl

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js" type="text/javascript">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="slick-bg.js"></script>
<script>
$(document).ready(function(){
$('.ct-slick-homepage').slick({
});
});
</script>

<div class="ct-header ct-header--slider ct-slick-custom-dots" id="home">
<div class="ct-slick-homepage" data-arrows="true" data-autoplay="true">

[repeater id="50" limit="0,3" type="calendar"]

<div class="ct-header tablex item" data-background="[get_asset_file_url id={{slider_image}}]">
<div class="ct-u-display-tablex">
<div class="inner">
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-6 slider-inner">
<h1 class="big">{{event_title}}</h1>
<p>{{slider_description}}</p>
<a class="btn btn-transparent btn-lg text-uppercase" href="{{slider_link}}">learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>

[/repeater]
</div>
</div>


Note - the only thing that needs to be edited in this code, is the following section:

[repeater id="50" limit="0,3" type="calendar"]

The repeater id="" needs the ID of the homepage slider manager. Open the homepage slider manager and look for the ID at the top left under the name of the module. Place the ID number inside the quotes ("").

The image below outlines where to find the ID of the module.

Note - The Slick Slider JavaScript file you uploaded is referenced in this code. It is included with links relative to this file. This will change if the resource or the repeater template are not peers of one another in Solodev.


Step 3

If you haven't already, create an index page that will hold your repeater template. Click here to learn more about adding a page.

Navigate to the index page that will contain your repeater template. In order to place the file into your STML, you need to select the Dynamic Div in which you’d like to place it by clicking on it. Once it turns blue, select the file from the left hand file tree and hit Publish.


Adding CSS Styling

Everything done right now achieves the objective of getting the slider working and placed on a specific page. While, optional, it is highly recommended that you apply CSS styling to make the slider look sharp and professional. Below is some sample styling you can add to your stylesheet that will apply to the slider:

/* Slider */
.slick-slider
{
position: relative;

display: block;
box-sizing: border-box;

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-list
{
position: relative;

display: block;
overflow: hidden;

margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.slick-track
{
position: relative;
top: 0;
left: 0;

display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;

content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}

.slick-slide
{
display: none;
float: left;

height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;

height: auto;

border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
.slick-prev,
.slick-next {
position: absolute;
display: block;
width: 60px;
height: 100px;
cursor: pointer;
background: transparent;
top: 50%;
margin-top: -45px;
font-size: 0;
border: none;
z-index: 2;
}
.slick-prev:before,
.slick-next:before,
.slick-prev:after,
.slick-next:after {
content: '';
position: absolute;
background: #fff;
height: 2px;
width: 50px;
top: 50%;
left: 5px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.slick-prev:before,
.slick-next:before {
margin-top: -22px;
}
.slick-prev:after,
.slick-next:after {
margin-top: 22px;
margin-top: 2.2rem;
}
.slick-prev:hover:before,
.slick-next:hover:before {
margin-top: -18px;
margin-top: -1.8rem;
}
.slick-prev:hover:after,
.slick-next:hover:after {
margin-top: 18px;
margin-top: 1.8rem;
}
.slick-prev {
left: -7px;
left: -0.7rem;
}
.slick-prev:before {
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.slick-prev:after {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.slick-prev:hover:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.slick-prev:hover:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.slick-next {
right: -7px;
right: -0.7rem;
}
.slick-next:before {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.slick-next:after {
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.slick-next:hover:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.slick-next:hover:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.ct-slick-arrows--type2 .slick-prev,
.ct-slick-arrows--type2 .slick-next {
opacity: 0.85;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
-webkit-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
.ct-slick-arrows--type2 .slick-prev:before,
.ct-slick-arrows--type2 .slick-next:before,
.ct-slick-arrows--type2 .slick-prev:after,
.ct-slick-arrows--type2 .slick-next:after {
background-color: #fff;
height: 15px;
height: 1.5rem;
width: 70px;
width: 7rem;
}
.ct-slick-arrows--type2 .slick-prev:before,
.ct-slick-arrows--type2 .slick-next:before {
margin-top: -20px;
margin-top: -2rem;
}
.ct-slick-arrows--type2 .slick-prev:after,
.ct-slick-arrows--type2 .slick-next:after {
margin-top: 20px;
margin-top: 2rem;
}
.ct-slick-arrows--type2 .slick-prev:hover:before,
.ct-slick-arrows--type2 .slick-next:hover:before {
margin-top: -20px;
margin-top: -2rem;
}
.ct-slick-arrows--type2 .slick-prev:hover:after,
.ct-slick-arrows--type2 .slick-next:hover:after {
margin-top: 20px;
margin-top: 2rem;
}
.ct-slick-arrows--type2 .slick-prev:hover:active,
.ct-slick-arrows--type2 .slick-next:hover:active {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
.ct-slick-arrows--type2 .slick-prev {
left: 10px;
left: 1rem;
}
.ct-slick-arrows--type2 .slick-prev:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.ct-slick-arrows--type2 .slick-prev:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.ct-slick-arrows--type2 .slick-prev:hover:before {
margin-top: -27px;
margin-top: -2.7rem;
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.ct-slick-arrows--type2 .slick-prev:hover:after {
margin-top: 27px;
margin-top: 2.7rem;
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.ct-slick-arrows--type2 .slick-next {
right: 10px;
right: 1rem;
}
.ct-slick-arrows--type2 .slick-next:before,
.ct-slick-arrows--type2 .slick-next:after {
left: auto;
right: 0;
}
.ct-slick-arrows--type2 .slick-next:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.ct-slick-arrows--type2 .slick-next:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.ct-slick-arrows--type2 .slick-next:hover:before {
margin-top: -27px;
margin-top: -2.7rem;
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.ct-slick-arrows--type2 .slick-next:hover:after {
margin-top: 27px;
margin-top: 2.7rem;
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
#home.ct-header.ct-header--slider {
background-size: cover;
}
.ct-header .ct-slick {
margin-bottom: 0;
}
.slick-initialized .slick-slide {
display: block;
}
.ct-u-display-tablex {
display: table;
width: 100%;
height: 600px;
}
.ct-u-display-tablex > .inner {
display: table-cell;
width: 100%;
vertical-align: middle;
}
.ct-header h1.big {
font-size: 6.7rem;
line-height: 1;
color: #fff;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
padding-top: 50px;
}
.ct-header p {
font-size: 2.3rem;
line-height: 1.1;
margin: 30px 0 40px;
color: #fff;
}
.btn-transparent {
background-color: transparent;
border: 3px solid #fff;
}
.ct-slick .slick-track,
.ct-slick .slick-list,
.ct-slick .item,
.ct-slick .slick-item {
min-height: inherit;
}
.ct-slick .item {
background-size: cover;
}
.slick-list {
height: 600px;
}

Congratulations! If you followed all the steps correctly, your homepage slider should be in place and working.

Your homepage slider should look something like the following hierarchy, with all necessary assets:

0 Comments

Please sign in to leave a comment.
Have more questions? Submit a request