【问题标题】:Owl Carousel navigation arrows not working on WordPress猫头鹰轮播导航箭头不适用于 WordPress
【发布时间】:2016-03-04 18:37:48
【问题描述】:

导航箭头不起作用 - 它们无法点击。这是基于 WordPress - 我们没有使用插件,因为这是一项自定义工作。在页面中间的白色部分底部看到它:

http://foster.gw.sandbox.uconnectlabs.com/

当用户点击导航箭头时,我会欣喜若狂地看到帖子从一个滚动到另一个。

注意事项:

  • 轮播将滚动浏览 WordPress 中的帖子,而不是图像。
  • 为了将这些帖子定位为“轮播”,我在帖子部分周围放置了一个包装器,名为“posting-wrapper”。
  • “.post”类被定位为要滚动的项目。
  • 看起来下面的所有 HTML 都是由它下面的 jQuery 代码生成的。我没有手动输入任何 Owl Carousel HTML - 它是自动生成的,显然是由 Owl Carousel 本身生成的。也许 .owl-carousel() 方法可以做到这一点,但我不确定。
  • 唯一的问题是箭头字符上没有链接/滚动。

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' ]
})
}

我注意到在 jQuery 代码中属性设置为“nav”和“navText”等,它们看起来像是 Owl Carousel 使用的缩写版本 - 分别是导航和导航文本。当我将这些属性更改为未缩写的版本时,会发生奇怪的事情(比如导航没有出现......看图)。

我认为设置它的人可能使用了他们自己的课程等,但是......是的。不知道它如何影响导航。

【问题讨论】:

    标签: jquery wordpress navigation owl-carousel


    【解决方案1】:

    那么当帖子超过 3 个时,它们应该滚动吗?我只能在您的包装器 .owl-stage 中看到 3 个帖子。里面应该有更多吗?也许在您的 PHP 中您将自己限制为 3 个帖子?

    【讨论】:

    • 不错的调用 - 它实际上是 PHP 中的一行获取帖子: $custom_main_loop = new WP_Query( array ( 'post_type' => 'post', 'posts_per_page' => 3 ) );我将它增加到 5 并将“item:3”放入 Owl Carousel jQuery 并修复它!万岁! (非常感谢!)
    猜你喜欢
    • 2018-11-03
    • 1970-01-01
    • 2021-12-09
    • 1970-01-01
    • 2020-02-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多