Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Carousel: How to Reposition Captions

Would you like to have your carousel image caption to appear below the image so it doesn’t cover your carousel image? We can help you with how to do just that! You just need a few lines of CSS to achieve this! We’ll help you with the CSS on how to have your image caption appear below the image on the Carousel sliders.

This tutorial is a little more technical as it requires basic knowledge of HTML and CSS.

First, we’ll assume for the purpose of this tutorial that you have already installed the Soliloquy Carousel Addon.

Your first step will be to install and activate the Soliloquy CSS Addon.

If you need any assistance in installing addons, please take a look at this article.

For this instance, we’ll be installing the CSS Addon.

Activate the CSS addon

Next, create a new carousel slider. If you need any help in creating a carousel slider, please review our documentation on How to create a carousel slider with Soliloquy.

Next, you’ll need to edit your images and add your captions and links.

To do this, click the blue pencil icon to open the Edit Item window.

To style the carousel caption to appear below image, first edit the image

Inside the Caption field, add your caption to your slider images.

Add your captions to each image

Using the right and left arrow keys in the top right corner of the Edit Item window, you can navigate through each slider image adding the caption you wish to appear. Remember to click Save Metadata after each time you add your caption.

Below is the CSS we’ve used in our demo.

For the carousel caption to appear below image, add your CSS to the Misc Tab

You’ll need to change this ID number to match your slider ID number. You can find this by looking in the sidebar of your slider edit screen.

For more information on how to find your slider ID number you can read this article.

#soliloquy-container-509035 .soliloquy-wrapper {
   overflow: hidden !important;
}
#soliloquy-container-509035 .soliloquy-viewport {
   overflow: visible !important;
}
#soliloquy-container-509035 .soliloquy-caption {
   position: relative !important;
}
Be sure to update the -509035 with your own slider ID number

If you’d like to change this for all sliders, just add the CSS to the WordPress customizer.

Check out our demo of this in action!

Once you click Publish or Update on your slider, you’re all set!

Would you like to have the caption appear below the slider on regular sliders? Take a look at our tutorial on How to Display Caption Below Slider.

[i]
[i]