Skip to content
Grav 2.0 is officially stable. Read the announcement →
Archive

Shortcode Owl Carousel Image Descriptions

Started by Muut Archive 9 years ago · 1 replies · 737 views
9 years ago

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

9 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 1334 9 years ago
Archive · by Muut Archive, 9 years ago
2 924 9 years ago
Archive · by Muut Archive, 9 years ago
2 4055 9 years ago
Archive · by Muut Archive, 9 years ago
1 2938 9 years ago
Archive · by Muut Archive, 9 years ago
3 1111 9 years ago