Owl Carousel navigation arrows not working on WordPress

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/

Read More

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.

Related posts

1 comment

  1. 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?

Comments are closed.