How do I use the Content Slider?

Here is a quick guide to everything you need to know in order to use the all-new Content Slider.

Module Status: Beta 0.1

Before we jump into how to use the Content Slider, it's important for you to know that it's currently in the beta release period.

Please report any bugs or feedback you might have here.

Let's cover some high-level basics

If you've been using the new Magic Module, you'll notice a very similar experience when using this Content Slider module.

As soon as you drag-n-drop the Content Slider into your webpage you'll notice the Slider Style Options dropdown. There are three styles to start and there could be more on the horizon. Wink, wink...


Screenshot 2023-03-24 at 10.45.49 AM

Style 1 - Image & Text (columns)

This will let you create slides with two columns. Perfect for an image on one side and text on the other.


You'll see that you can very easily choose which side you want the image on, the column ratios, content vertical alignment, and the number of slides you want to have in view at once.


Screenshot 2023-03-24 at 11.24.41 AM

To add, slides you can simply click the +Add link.


Screenshot 2023-03-24 at 11.26.04 AM

The first thing you'll notice is that Slider Style 1 allows you to select between an image, icon, or Lottie file to display next to the text.


Screenshot 2023-03-24 at 11.27.10 AM

IMPORTANT NOTE: If you plan on including Lottie Files, you must turn this feature on under the Start Here section of the module.


Screenshot 2023-03-24 at 11.29.10 AM

Styling the slides

You have full control over the style of the slide itself.  These options can be found under the Style Tab here.


Screenshot 2023-03-24 at 11.31.46 AM

Open that up and you'll see a range of options to control the background color, border, and rounded corners.


Screenshot 2023-03-24 at 11.32.14 AM

You also have the option to have the Image Fill the Entire Column so it looks like this.



When you turn this feature on there is an important 2nd step.  Under the Slider Spacing options you will want to set the padding to 0px;


Screenshot 2023-03-24 at 11.36.50 AM

Style 2 - Image & Text (stacked)

This style is very versatile and works great when you want to simply slide through a variety of images like a logo scroller. It looks like this...



Once you drag this module onto the page you'll see that you can easily set what you want to happen when the image is clicked.


Screenshot 2023-03-24 at 11.44.54 AM

Next, you can set how many slides you'd like to show in view at once. It's important that the number of slides shown is LESS than the actual number of slides you have.


Screenshot 2023-03-24 at 11.48.39 AM

When adding/editing each of the slides, you'll also notice that you have the ability to add text below each image via the rich text editor should you want to add additional context.

Slider Style Settings

Since this is a pretty basic slider, there are just a few simple style options available.


Screenshot 2023-03-24 at 12.11.04 PM

Style 3 - Testimonials (or get creative)

Looking for a new way to add Testimonials to your CLEAN website? Then this option might just be exactly what you're looking for.



When selecting Style 3 you have the ability to add content in the first column or remove it altogether to only show the testimonials.


Screenshot 2023-03-24 at 1.24.51 PM

Editing each testimonial slide:

  • Adding an image:
    It's best to upload images to each testimonial slide that are the same size.  They are set to fill the entire top space so having them the same size will make sure they all look consistent.
  • Adding quote text:
    You have access to a rich text editor so you can really go wild in formatting each quote.
  • Edit/Change the icon:
    Have an idea for a different type of card? You can easily change the quote icon to something different.

Slider Style Settings:

You've got full control over how you'd like the slides to look.  Here's what you can control:

  • Image Height
  • Turning on/off the quote icon
    • Icon Color and Background Color
    • Bar color
  • The background color of the slide
  • Border
  • Rounded corners
  • The spacing around the quote text

Slider Control Style Settings

You also have full control over the elements that control the slider. You can find them under the style tab.


Screenshot 2023-03-24 at 1.36.26 PM

Here are a few of the awesome options you have at your disposal.

  • Scroll Animation Speed
    Lets you control the actual speed of the animation when the slide is triggered.
  • Auto Rotate
    Turning this on will automatically cycle through the slides
  • Auto Rotate Speed
    Lets you set how much time before the slide animates to the next slide.
  • Show Dots
    You can turn on/off the slide indicators below the slides.
  • Dot color options
    Easily change the color for the normal and active state
  • Show Arrows
    Allows you to turn on/off the arrows on either side of the slide
  • Arrow Color

Screenshot 2023-03-24 at 1.42.12 PM

If you have any questions, or feedback, or catch any bugs as you start using the new Content Slider, be sure to let us know here.