Navigation arrows are not working – they are unclickable. This is based in WordPress – we are not using a plugin because this is a custom job. See it here at the bottom of the white section about halfway down the page:
http://foster.gw.sandbox.uconnectlabs.com/
What I’d be overjoyed to see happen is having posts scroll from one to another when a user clicks on the navigation arrows.
Some things to note:
- The carousel will be scrolling through posts in WordPress rather than images.
- In order to target these posts for “carouseling”, I put a wrapper around the posts section named “posting-wrapper”.
- The “.post” class is what gets targeted as an item to be scrolled.
- It looks like all of the HTML below is generated by the jQuery code beneath it. I have not manually entered any of the Owl Carousel HTML – it is generated automatically, apparently by Owl Carousel itself. Perhaps the .owl-carousel() method does this, but I’m not certain.
- The only thing wrong is the absence of linking/scrolling on the arrow characters.
HTML:
<div class="posting-wrapper owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 1220px;">
<div class="owl-item active" style="width: 406.667px; margin-right: 0px;">
<div class="owl-item active" style="width: 406.667px; margin-right: 0px;">
<div class="owl-item active" style="width: 406.667px; margin-right: 0px;">
</div>
</div>
<div class="owl-controls">
<div class="owl-nav">
<div class="icon-angle-left nav-prev" style=""></div>
<div class="icon-angle-right nav-next" style=""></div>
</div>
<div class="owl-dots" style="">
</div>
</div>
jQuery:
if (jQuery(".posting-wrapper .post").length > 2){ // If it detects more than two entities, do the following...
jQuery(".posting-wrapper").addClass('owl-carousel');
jQuery(".owl-carousel").owlCarousel({
nav: true,
navText: ['', ''],
navClass: [ 'icon-angle-left nav-prev', 'icon-angle-right nav-next' ]
})
}
I noticed in the jQuery code that the properties are set to “nav” and “navText”, etc, which look like abbreviated versions of what Owl Carousel uses – navigation, navigationText, respectively. When I change these properties to the unabbreviated versions, strange things happen (like the nav doesn’t appear… go figure).
I think the person who set it up may have used their own classes, etc, but… yeah. Don’t know how it affects the navigation.
So when there are more than 3 posts, they should scroll? I can only see 3 posts in your wrapper .owl-stage. Should there be more in there? Maybe in your PHP your limiting yourself to 3 posts?