Owl 轮播导航箭头在 WordPress 上不起作用
Owl Carousel navigation arrows not working on WordPress
导航箭头不起作用 - 它们不可点击。这是基于 WordPress 的——我们没有使用插件,因为这是一项自定义工作。在页面一半左右的白色部分底部看到它:
http://foster.gw.sandbox.uconnectlabs.com/
当用户单击导航箭头时,posts 会从一个滚动到另一个,我会非常高兴。
一些注意事项:
- 轮播将滚动浏览 WordPress 中的 posts 而不是图像。
- 为了将这些 posts 定位为 "carouseling",我在 posts 部分放置了一个包装器,名为 "posting-wrapper".
- “.post”class 被定位为要滚动的项目。
- 看起来下面的所有 HTML 都是由它下面的 jQuery 代码生成的。我没有手动输入任何 Owl Carousel HTML - 它是自动生成的,显然是由 Owl Carousel 本身生成的。也许 .owl-carousel() 方法可以做到这一点,但我不确定。
- 唯一的错误是箭头字符上没有 linking/scrolling。
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 使用的缩写版本 -导航,导航文本,分别。当我将这些属性更改为未缩写的版本时,奇怪的事情发生了(比如导航没有出现......看图)。
我认为设置它的人可能使用了他们自己的 classes 等,但是...是的。不知道对导航有什么影响。
所以当帖子超过 3 个时,它们应该滚动吗?我只能在你的 wrapper .owl-stage 中看到 3 个帖子。里面应该有更多吗?也许在您的 PHP 中,您将自己限制在 3 个帖子内?
导航箭头不起作用 - 它们不可点击。这是基于 WordPress 的——我们没有使用插件,因为这是一项自定义工作。在页面一半左右的白色部分底部看到它:
http://foster.gw.sandbox.uconnectlabs.com/
当用户单击导航箭头时,posts 会从一个滚动到另一个,我会非常高兴。
一些注意事项:
- 轮播将滚动浏览 WordPress 中的 posts 而不是图像。
- 为了将这些 posts 定位为 "carouseling",我在 posts 部分放置了一个包装器,名为 "posting-wrapper".
- “.post”class 被定位为要滚动的项目。
- 看起来下面的所有 HTML 都是由它下面的 jQuery 代码生成的。我没有手动输入任何 Owl Carousel HTML - 它是自动生成的,显然是由 Owl Carousel 本身生成的。也许 .owl-carousel() 方法可以做到这一点,但我不确定。
- 唯一的错误是箭头字符上没有 linking/scrolling。
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 使用的缩写版本 -导航,导航文本,分别。当我将这些属性更改为未缩写的版本时,奇怪的事情发生了(比如导航没有出现......看图)。
我认为设置它的人可能使用了他们自己的 classes 等,但是...是的。不知道对导航有什么影响。
所以当帖子超过 3 个时,它们应该滚动吗?我只能在你的 wrapper .owl-stage 中看到 3 个帖子。里面应该有更多吗?也许在您的 PHP 中,您将自己限制在 3 个帖子内?