猫头鹰轮播导航箭头不能在WordPress上工作

时间:2015-11-30 23:56:17

标签: jquery wordpress navigation owl-carousel

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

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

当用户点击导航箭头时,我喜欢看到发生的事情就是让帖子从一个滚动到另一个。

有些注意事项:

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

HTML:

class Section(models.Model):
    report = models.ForeignKey(Report)
    parent = models.ForeignKey('self', blank=True, null=True, related_name='children', limit_choices_to= ... )

jQuery的:

<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代码中注意到属性设置为“nav”和“navText”等,它们看起来像Owl Carousel使用的缩写版本 - navigation,navigationText。当我将这些属性更改为未缩写版本时,会发生奇怪的事情(例如导航不会出现......去图)。

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

1 个答案:

答案 0 :(得分:2)

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

相关问题