Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Output Custom Slider Item CSS Classes

Would you like to create custom slider item CSS classes to use for specific CSS targeting? You can easily do this with Soliloquy by just adding your class name to the predefined area inside the slider settings! We’ll walk you through how to create custom slider CSS classes.


Step 1 – Create a new slider

Your first step is to create a new slider. You can follow along with our documentation for creating your first slider.

Step 2 – Add your class name

Next, on the Misc tab you’ll see an input box called Custom Slider Classes.

Here is where you can list your custom CSS classes. You can separate these by comma.

However, please know that this class name will be applied to the slider container and not individual slides.

Add your class name to the Misc tab in the correct field

Step 3 – Publish your slider

Once you’ve added your class name and set up your slider, just click Publish to publish the slider.

Now when you view your slider in the console, you’ll see your additional class name on the slider container.

View your new class name added to the slider container

And it’s really that easy! Would you like to customize the Soliloquy caption? Take a look at our article on How to Customize the Soliloquy Caption.