Designing a Customer Logo Carousel with Solodev

This tutorial covers building a customer carousel module in Solodev using shortcodes. Login to Solodev or Sign Up for a 14 Day Free Trial today to follow along with this tutorial!

Note: To learn more about creating a customer carousel module in Solodev, check out our in-depth technical documentation. Not using Solodev? Check out our pure HTML5 tutorial.

Nothing shows potential customers your credibility more than a stream of company logos sliding across your homepage. This tutorial will provide you with the code you need to build a customer carousel module using Solodev Shortcodes.

Step 1

Create your Customer Carousel Module

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

Note: You can add a module to any location within the Solodev system; however, we recommend creating a dedicated “modules” folder inside the “web files” directory in order to keep all of your modules organized and easy to find.

For enterprise users, we suggest creating your modules inside your “Data Center” directory.

Step 2

Upload your Customer Carousel Form

The code below will add the appropriate fields to your customer carousel module. First you will need to save this code to your computer as a simple text document with .tpl at the end of the file name such as “carousel-form.tpl”.

//Upload this form to your newly created 'Calendar'
<label class="control-label">Client Logo</label>
<input type="file" name="client_logo" class="form-control">
<label class="control-label">Alt</label>
<input type="text" name="client_logo_alt" class="form-control">
<label class="control-label">Client Link</label>
<input type="text" name="client_link" class="form-control">

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

Step 3

Add Entries to your Customer Carousel

Open your newly created module and click Add Entry. You can now add an image, alt text, and the URL to which you would like the view to go (If viewer clicks on logo). Once finished filing out the fields click Save.

Step 4

Create your Repeater Template

Copy and paste the code below into a new file called repeater.tpl inside your module folder

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link rel="stylesheet" type="text/css" href="carousel.css">
<script>
window.onload=function(){
$(document).ready(function(){
$('.customer-logos').slick({
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1000,
arrows: false,
dots: false,
pauseOnHover: false,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 3
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 2
}
}]
});
});
}
</script>
<div class="customer-logos">
[repeater id="14" limit="0,8" type="calendar"]
<div class="slide">
<img src="[get_asset_file_url id={{client_logo}}]"/>
</div>
[/repeater]
</div>

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

repeater id=”” limit=”0,9" type=”calendar”

The repeater id=”” needs the ID of the logo carousel manager. Open the logo carousel 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.

Step 5

Add the CSS below to the main stylesheet of your website

/* Slider */
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.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;
}

Step 6

Add your repeater template to your web 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.

Your customer carousel module will appear as it does below on your user-facing website.

Congratulations! You’ve successfully built your first module in Solodev! To learn more about building modules in Solodev, check out our in-depth documentation!

Learn More

Originally Posted on the Solodev Web Design Blog

Get daily web design tutorials in your inbox by subscribing to the Solodev Blog at solodev.com/blog/!
Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.