Owl carousel - add captions

Support Plugins
1

I’m trying to transition a website (rpallen.com.br) from WordPress to Grav. I’ve been pretty successful so far, but I’m having trouble with the slider. I’m using owl carousel and I can’t figure out how to put captions below the pictures. If you go to the current website, you’ll see what I’m trying to achieve. Unfortunately, I’m developing the Grav version on my local computer so I can’t really show you what I currently have in Grav.

I couldn’t find a way to add captions to the pictures if I use markdown for the slider images, so I tried using html instead, specifically, using the “fugure” tag. The code for the testing is (I cut it back to just three images for the testing):

[owl-carousel items=2 margin=10 loop=true autoplay=true autoplayHoverPause=true nav=false slideBy=2]

<figure>
	<img style="margin:0;padding:0;" src="eu.jpg"/>
	<figcaption>Caption 1</figcaption>
 </figure>

<figure>
	<img src="party_group.jpg"/>
	<figcaption>Caption 2</figcaption>
</figure>

<figure>
	<img src="eating.jpg"/>
	<figcaption>Caption 3</figcaption>
</figure>

[/owl-carousel]

I previously used markdown for the images:
Example: ![](eu.jpg) and that worked fine for just the images. But I want to have the captions.

When I used the code above, it worked, but the images were somwewhat smaller than when I used markdown for the images. I removed the captions to see if that affected the image size and it did NOT. The other thing that changed was the direction of the transition. When I used the markdown code, the transition went from right to left (i.e, they “swiped” from right to left), which is the way I want it to go and is the way it goes on my current site. But when I used html, the direction of the transition went in the opposite direction.

I’ve included screenshots of the slider one with the markdown code and one with html code so you can see the difference in size of the images.

Any ideas how to get this working the way I want with the images the same size in markdown and html?

markdown
markdown1179×602 437 KB

html
html1165×605 592 KB

2

@ranman

Smaller images:
Did you have a look at the css settings of <figure>? Browsers may have their own default setting for <figure> and you corrected that in the stylesheet on your site by setting margin: 0 for <figure>. You probably forgot to set the style on your localhost.

figure {
    margin: 0;
}

Righ to Left:
Looking at the plugin and the original owl-carousel, it has a setting rtl which can be set to true or false.

By setting it to true, it will scroll from right to left. Unfortunately…

  • That will also reverse the order of the images. Don’t know how to fix that.
  • The caption will now be positioned on the right site of the image. To correct that, you can set the following for figure to reset it to the left side:
    figure {
    margin: 0;
    direction: ltr;
}
3

Thanks a lot!

Everything you suggested worked fine. But I’ve got a couple of other problems-see below.

Regarding the figure css, in my file custom.css I added:

.owl-carousel .owl-item figure {
    direction: ltr;
    margin: 0;
}

I did this so it will only change figures in the carousel, not other figures I may add to the site.

I had originally thought the problem was with margins. I don’t know why, but I tried altering the style of the img tag instead of the figure tag and obviously, that didn’t work.

My other problems:
1-I don’t see how to change how much time there is between transitions. It seems that the smartSpeed setting controls the transition speed, but I can’t find a setting for the time between transitions.
2-Mouse-over seems to stop the slideshow rather than pause it. If I mouse-over the slideshow, it stops as expected, but when I remove the mouse, the slideshow doesn’t resume, though I can “force” it to resume by clicking on the dots. Is there a way to set this behavior?

4

@ranman,

  1. From the docs: Did you try autoplayTimeout
  2. From the Owl Carousel github repo: This is an known issue which is fixed in later versions of Owl Carousel.
    The plugin contains an old(er) version. To use the latest version of Owl Carousel, you can download the latest release (which is officially dead by the way) and copy the css and js into the plugin’s folders.
5

That did it. Thanks again.

Regarding 1-I guess I missed this in the docs because of the word “Timeout”. Maybe I was looking for something like"interval" or “pause”.

Regaeding 2, I’m not sure I’ll bother since it’s dead. The Github page recommends tiny-slider as an alternative. Do you have a recommendation for an alternative to use in Grav? A few days ago I looked at the Grav plugin “lightslider”, but I found the documentation a bit confusing, but I only looked at superficially. If that’s the best alternative, I could go back to that and concentrate when I read the docs.