Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

How to Create HTML Sliders

Would you like to create sliders using your own HTML? Soliloquy makes this very simple and easy for you! This tutorial will walk you through each step.

  1. Create or Edit Slider
  2. Add HTML Slide
  3. Style HTML Slider with CSS (optional)
  4. Configure Your Slider (optional)
  5. FAQs

Step 1 – Create or Edit Slider

The first step is to create or select a slider to edit.

Step 2 – Add HTML Slide

From the slider edit screen, select the Select Files from Other Sources button from the Native Slider section.

select image from other sources

This will open the Insert Media lightbox. Select the Insert HTML Slide link from the left sidebar:

insert-html-slide

This will then display the following fields for you to add your first html slide:

  • HTML Slide Title – required
  • HTML Slide Code

Enter the title (for your organizational purposes only), and add your HTML:

add html to the slide

When you’re finished, select the Insert into Slider button at the bottom of your screen to add your html slide:

<div class="blockquote"><p>I used to custom build rotators for every project since I hadn't found a tool with the flexibility I needed. Now I have Soliloquy. It works great out of the box, has an easy-to-use interface, and gives you the power to customize everything with hooks and filters.</p>
 
<div class="quote-image"><img src="#" alt="bill" /></div>
<div class="quote-footer">Bill Erickson<strong> at <a href="#" target="_blank">at billerickson.net</a></strong></div>
 
</div>

Step 3 – Add your CSS to accent your new HTML slide (optional)

Since you’ve used HTML to create your slide, you will want to create some CSS to make the HTML look good. Alternatively, you could use your theme’s class and id’s name when creating your HTML for easier use. But for this instance, we’re going to use our own CSS and using the Soliloquy CSS Addon.

You can use CSS to apply your own CSS to slider images.

  • Apply CSS to Specific Slider: Use the CSS Addon to apply the CSS from this doc to a specific slider on your site.
  • Apply CSS to ALL Sliders: To apply the CSS from this doc to affect ALL sliders on your site, add to your active theme‚Äôs style.css file.
.blockquote {
    max-width: 100%;
    margin:0 auto !important;
}
.blockquote p {
    font-size: 16px;
}
.quote-image {
    float: left !important;
    display: inline-block;
    margin: 20px 0 !important;
    max-width: 20%;
    width: 75px !important;
}
.quote-image img {
border-radius: 50%;
}
.quote-footer {
    margin-top: 50px !important;
    margin-left: 90px !important;
}

Step 4 – Configure Your Slider (optional)

Lastly, we recommend you configure the dimensions of your slider in the Config tab to make sure it displays in the correct proportions to best highlight your html! The CSS above is for demonstration only and can vary based on your theme.

That’s it! Publish or update your slider and you’ve successfully created a html slider!

If you’d like to experiment further with Soliloquy, why not check out our article on How to Toggle Slide Caption With the Click of a Button.


FAQs

Q: Can I add multiple html slides at one time?

A: Yes! You can select the Add Another HTML Slide button at the top of the Insert HTML Slide lightbox to add more slides at one time.

add another html slide to your slider

This will output an additional set of fields each time you select it, allowing you to more quickly populate a html slider.

[i]
[i]