Skip to content
Grav 2.1 is out: every page speaks Markdown. Read the announcement →

Shortcode Owl Carousel Image Descriptions

Started by Muut Archive 10 years ago · 1 replies · 831 views
10 years ago

Can't figure out how to add image descriptions/names...does anybody know?

10 years ago

You mean text over the image? The docs have a sample:

HTML
[owl-carousel items=2 margin=10 loop=true]
<div style="background: url({{ page.media['image-1.jpg'].url }}) 50% 50%;background-size: cover;color:#fff;">
  <h2>This is panel 1</h2>
  <p>foo</p>
</div>
<div style="background: url({{ page.media['image-2.jpg'].url }}) 50% 50%;background-size: cover;color:#fff;">
  <h2>This is panel 2</h2>
  <p>foo</p>
</div>
<div style="background: url({{ page.media['image-3.jpg'].url }}) 50% 50%;background-size: cover;color:#fff;">
  <h2>This is panel 3</h2>
  <p>foo</p>
</div>
[/owl-carousel]

I think the CSS provided with owl-carousel plugin should handle this. If you want other styling, you will need to add it.

Suggested topics

Topic Participants Replies Views Activity
Archive · by Deleted User, 9 years ago
0 2280 9 years ago
Archive · by Muut Archive, 9 years ago
2 1496 9 years ago
Archive · by Muut Archive, 9 years ago
2 4745 9 years ago
Archive · by Muut Archive, 9 years ago
1 3557 9 years ago
Archive · by Muut Archive, 9 years ago
3 1621 9 years ago