A NEW and easy way to display posts!
The Owl Carousel plugin adds a new module to the Divi Page Builder, adding the ability to display posts in a carousel. Similar to other Divi post modules, you can adjust the layout within the module options:
- how many posts you want to display in the carousel
- how many posts you want to offset
- display title, category, date, and excerpt
- automatically rotate through the carousel and define rotation speed
Camping Under the Stars
Sun Peaking Behind Mountains
Coffee and Dessert
Orange and Pinapple Fruit
Sunset on the Beach
Music Concert
Surfing the Barrel
Fireworks
Couple on Cliff Edge
Deep Turtle
For the following options and features, check out the Pro version!
- display any custom post type
- load the featured image in a lightbox when clicked
- control the featured image thumbnail size for square or portrait
- control the number of images displayed per rotation
- display custom fields
Hi Brad
Thank you, another awesome plug in!
I have two questions–
1- I just want to highlight my latest post, so is there a way to get that, but then start the other posts under it (using Portfolio Posts Pro) to offset by one. So the latest shows in the carousel, and the rest of the posts show up in sequence below it?
2- I’m getting the same post showing up in a grid of five. Can I get a row view (of just one) on this?
Again, great stuff. Really helps a non-techie like me with my site development.
Michael
Thanks Michael!
1. If you only want one post to display, I would recommend using the default blog module in fullwidth mode up top, and then you can use the carousel or Portfolio Posts Pro below it. Unfortunately the portfolio plugin doesn’t have the offset option yet (coming soon!)
2. If the query is only able to find one post, it will repeat that post 5 times to fill the carousel. You can upgrade to the Pro version of the carousel and change it from 5 to 1, and then it would only show one post at a time. But the carousel defaults to fill the area (column) with the image. So in a single column row, the image might be too big.
Looks good, will the pro version be able to post a Woocommerce product/s as a custom post type ?
Thanks Mitch. Yes, the free version is limited to posts only. The pro version will load any custom post type including WooCommerce products, and you can use the Custom Field option to display any custom fields from custom post types such as price, date, ect.
Thanks Brad
Is it possible to have the carousel display most popular posts?
I’ll try the default blog module in full width.
And yes yes yes, would love to have an offset for the Portfolio Pro Plugin. That would be awesome. In the mean time, is a css or other hack to tide me over?
Thanks, Michael
With the Custom Query option, it is possible but would require some leg work. This tutorial shows how to add a custom field to each post which would increment each time a user views the post: http://www.wpbeginner.com/wp-tutorials/how-to-track-popular-posts-by-views-in-wordpress-without-a-plugin/
You would then need to use the Custom Query option in the module to order the posts by this new custom field.
You could use CSS to add “display: none;” to the first portfolio item in the Portfolio Posts Pro plugin but it would likely throw off the alignment of the columns. We’ve made some big improvements in how we query the available posts and custom post types in the carousel plugin so we’re going to port that over to the portfolio plugin along with the custom query and offset options. Stay tuned!
Hi Brad
Thanks for all the detailed information. Probably a bit beyond my pay grade to attempt this, but I can get my WordPress Dude on it.
Wondering if you have a timeline for adding the offset option to PPP? At the moment that is a show stopper for me.
Thanks, Michael
Hoping by early next week. Everything is in place, just need to work on adding pagination support
Hey Michael. The offset has been added to the Portfolio Posts Pro plugin. Download the latest version of the plugin and install it on your site after uninstalling the old version. If you don’t see the offset option in the module, clear your browser’s cache and refresh the page. Thanks!
Hi brad
In the pro version would it be possible to only display the image without the click through? We wanted to use this plugin for a staff rotator but they dont want to click through to individual content (assuming that by not having an archive this would be disabled but not sure). Would we also be able to have the text in a custom field (what drives the custom field functionality?) that has all the text for each staff member on the slider OR would we need to change the WordPress limitations on how long a excerpt goes for.
Sorry for all the questions, just want to make sure I understand everything.
The pro version adds an image carousel module. You would be able to load multiple images into this module and if you didn’t specify a URL, the images would not link to anything. With the image module, you can add as much text/html as you want below each image.
The other module that comes with the Pro version loads posts and custom post types. This is where you can use the custom fields option. You can display custom fields by adding the fields to each post or custom post type. Then in the module, you would turn on the custom fields option and add your custom field name or a comma separated list of field names that would then get displayed below the featured images.
Hope that helps! Please feel free to ask as many questions as you want 🙂
Hello Im trying to display custom fields on the slider seems like it wont work. Please advice https://vacafe.aspengrovestudios.space/
The custom field name is Instructor
Hi John. Looks like you have this working, although it appears the structure of the custom field spans are a little off. Has the plugin been modified?
Hi,
Somehow the plugin is referring to the images sized to 1080×9999. I upload image1.jpeg, wordpress does his job creating thumbnail sizes and whatnot, but the image carousel is referring to image1-1080×9999.jpg, which does not exist.
Workaround is to check the use original image option, but it’s quite cumbersome to resize al the images to the exact ratio and this way you also dont have the full image in the Lightbox.
Please advise,
Best regards,
Klaas
Hi Klaas. Make sure you change the thumbnail size to the size you want to load. If you select a size that the thumbnail actually exists, it should load. Also, the lightbox image will always load the fullsize version of the image. Even if you select the thumbnail size as 150 x 150 but the original image is 1000 x 1000, the larger image will load in the lightbox, not the tiny thumbnail.
Hello, I just installed the free owl carousel plugin from divi plugin. but I get a problem the module carousel ow not open what would be the problem if you could help me please
Hi Antony. What do you mean the “module carousel ow not open”? When you add the module to a page, you’re not able to configure it?
Hi there, i actually have the same problem as antony raul….i installed the free version to have a practice and the module simply doesn’t load in to my section in the divi visual builder.
However when i view the page i can see it….so going into the divi regular builder i could see the module and i was able to set it up.
BUT, if i go back into visual builder again it is not seen or accessible….
Any ideas?
Thanks 🙂
And just to add to my questions, The titles don’t centre when i set them, the post excerpt doesn’t show when i ask it and the scroll arrows don’t appear anywhere…
I’m sure some simple fixes but still frustrating 🙂
Hi Colin. Thank you for the feedback. The modules are not available in the visual builder but are available in the page builder. Elegant Themes has not released the API to allow developers to add modules to the visual builder so unfortunately it’s just not possible. It does look like there is a bug for the title center text. But the excerpt and scroll issues should work. The scroll arrows will only display if you have more items than are currently displayed. For example, if you have the carousel set to display 5 items at a time but only have 5 items total, the arrows will not display until you have 6 items total.
Thanks Brad, is there a difference in the paid version? or the centre bug still remains? any ideas on why the excerpt doesn’t show? i will try again in a couple of hours when i am back home. thanks 🙂
The center bug is also in the pro version. We have a fix ready to push but need to test a few features we are adding in the same update. Should be ready before the end of the week.
Hi Brad, so i got the arrows showing (added more posts) but that wasn’t the reason….my background was grey and the default arrow colour is grey! So the were there all along but i just couldn’t see them. Also got the excerpt to show, cleared my cache again and resaved and it seemed to do the trick.
So i want to upgrade to the pro version for the arrow editing etc. Can i simply upgrade or it’s better to uninstall the free version and then move to the paid version?
Thanks 🙂
Great! Glad you got it worked out. You’ll need to uninstall the free version (or at least deactivate it) and then install the pro version.
Hi there,
I am using the owl carousel and its perfect for our use so thank you! The only thing I can’t get images to center vertically, see below this page:
https://freshpeople.nl/
How to do this?
Thanks!
Laura
Thank you Laura! You’ll need to control the vertical alignment within the image itself. For example, this logo is vertically aligned in the image:
https://freshpeople.nl/wp-content/uploads/2017/07/images-anwb.png
So is this image, but with a different image size and aspect ratio as the one above:
https://freshpeople.nl/wp-content/uploads/2017/07/iProspect-logo-400×284.png
You’ll need to normalize all of your images – same size and logo centered in the image. Decide on an image size – 200 x 200, 400 x 400, 600 x 400. Whatever size and aspect ratio you need. Then center the logo within an image that size. Do the same for all logos and they will all be centered.
I love your plugin, thank you. I have a request to make some styling adjustments and I am curious what CSS I might adjust to create an image carousel that looks similar to the example here: http://headlinerworld.com/. At the example link for headliner the images span to the edge of the screen, that is the most important style request. The second less important request is to have the title and link/button appear on top of the image instead below. So I am curious what styling options are available. Thanks!
Thank you Bryan! The pro version of this plugin does feature fullwidth modules. However, it does not have the ability to display the title on top of the image. You could probably do this with CSS and absolute positioning, but it’s not possible from within the module settings.
Where is the documentation for this please?
I’ve installed it previously and now want to make some changes but ca’t find any documentation!
Hi Ian. You can view answers to common questions here:
https://diviplugins.com/faqs/owl-carousel-pro/
We have plans for true documentation but all of the options in the module have descriptions that should help guide you. You should find everything you need in one of the three tabs in the module: Content, Design, Advanced. Please let me know if I can help you with anything specific.
Ok, so currently it shows 5 posts but I want to display 4 (and obviously each slighlty larger … how do I do this?
Having looked again, maybe this feature is only available with the Pro version?
I’d also like to increase the padding between the columns, but there is only the option to change the padding on the whole module (and ideally add a border round each column)
Are these option available in the Pro version?
Hi Ian. Correct. The Pro version has everything you are looking for: change from 5 to any number, increase the margin, and add a border. Changing the number and increasing the margin are both in the Design tab of the Pro module settings. You can also change the number depending on screen size (desktop, tablet, mobile). The images will adjust in size to fill the container. So if you change from 5 to 4, they will get bigger. You can reduce them by increasing the margin between each image. The border can be added in the Advanced tab of the Pro module settings. You can apply CSS to the single item container.
Hi, Ian:
In the Pro version when I have only one post with an specific tag it appears covering th entire div. If I set thumbnails to 3 or 4 the carrousel shows the same post three or four times. Is there any way to show only one post in a four posts template? I’ve tried even the offset option but I don’t understand how it works. Thank you in advance.
Jorge
Hi Jorge. What you can do is set the carousel to only show 1 thumbnail at a time, but then limit the size of the single image using CSS or you can simply place the module in a smaller column. For example, you could place it in a 1/3 or 1/4 column.
Hello, great plug-inn, am trying to show a carousel for a category but it shows all is it available in the free version or only the paid one?
Thanks Saef! If the category is a post category, you can use the free version of the plugin. If you need to display posts from a custom post type category, you’ll need to upgrade to the Pro version. Also make sure you are using the module in the Page Builder. We’re still working on updating it to work in the Visual Builder.
Hi guys, how can I change the background color of a single item in the pro version? ccs prbably, but which?
Hi Robin. You can add your background CSS in the Carousel Items Container section under the Advanced tab of the module. That will add the background to each carousel item.
Hello. I used the plugin quite a few times on one page, set the categories, made sure it is correct in the posts, but somehow every carousel shows the same images/posts?
Hi Joan. Make sure you do NOT have the Custom Query option turned on. That option will ignore your selected post types and categories and will default to the 10 most recent blog posts if you don’t have a custom query filter set in your functions.php file.
If that’s not the issue, please contact us and we would be happy to take a look.
Hi,
I’ve just started working with the DP Owl Carousel (free), and I encountered a problem: I don’t see neither the arrows nor the controls (dots) on my page.
I tried to look at it with Chrome Dev Tools, and that the “div” with the “owl-nav-class” always gets the “disabled” class. I changed the “display” of the “disabled” class to “block”, and then I could find the area where the arrows are supposed to show up – but visually they’re not there.
‘data-arrow=”on”‘ and ‘data-control=”on”‘ are set on the “div” with the “owl-carousel” class.
I use WP 4.9.8 and Divi Theme 3.14, and I downloaded the Owl Carousel today.
Thank you for your help in advance!
Hi Muka. The arrows and controls will only display if you have more than 5 items in the carousel. Once you add a 6th item, you should see both appear.
Hi, is this compatible with the latest version of Divi Builder?
Hi Sharon. We’re working on an update for the free version of this plugin to make it compatible with the Visual Builder. Should have it finished very soon. I’ll update when it’s ready.
Hello, any idea what I should edit in order for the href to open in a new tab? The carousel works, I have href on thumbnail and title, but I can’t find the option to have it open in a new tab. Thank you!
Hi Bogdan. The open in new tab option is available in the image carousel. For post carousel, we’ll need to add a small javascript function that will make all links in the carousel open in a new tab. Please submit a support ticket and we’ll send that to you and show you were to add.
Hi,
thanks for this awesome plugin. I have one question. I would like to have only 3 posts in carousel, but to have it on the full screen. If I put 3 posts in settings, it’s aligned to right and doesn’t look really nice. The thumbnails are too small.
Hope it makes sense. How do I do that?
Thank you
L.
Thanks Lucie! The free version of the plugin doesn’t have an option to change the number of items displayed in the carousel at one time. So even though you set it to only query 3 posts, it is still leaving room for 5 posts. If you upgrade to the Pro version of the plugin, you can change the number of items displayed to 3 and will not have empty space.
Hi Brad!
Thank you for this plugin. I’m using it inside tyheme builder and can’t find the option to only show current category, as is possible in the Divi post module. Is this a pro feature?
Ragards
Johan