我正在使用owl carousel 1插件,我正在尝试将所有内容升级到版本2.我有一个带自定义导航栏的滑块:
$(document).ready(function () {
function customPager() {
$.each(this.owl.userItems, function (i) {
var titleData = jQuery(this).find('img').attr('title');
var paginationLinks = jQuery('.owl-controls .owl-pagination .owl-page span');
$(paginationLinks[i]).append(titleData);
});
}
$('.rri-carousel').owlCarousel({
navigation : false, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem : true,
lazyLoad : true,
afterInit : customPager,
afterUpdate : customPager,
transitionStyle : "fade",
autoPlay : true,
stopOnHover : true
});
});
如何将此转换为猫头鹰旋转木马2?我目前有:
$(document).ready(function () {
function customPager() {
$.each(this.owl.userItems, function (i) {
var titleData = jQuery(this).find('img').attr('title');
var paginationLinks = jQuery('.owl-controls .owl-pagination .owl-page span');
$(paginationLinks[i]).append(titleData);
});
}
$('.rri-carousel').owlCarousel({
loop : true,
items : 1,
nav : false,
onInitialized : customPager,
onResized : customPager
});
});
但是我在Chrome控制台中获得了Uncaught TypeError: Cannot read property 'userItems' of undefined
,当我点击它时,它会在$.each(this.owl.userItems, function (i) {
this.owl.userItems
上显示错误。
我假设该功能已被删除以在更新中更改,但我无法解决任何问题,我是javascript的新手。
我不仅得到了这个错误,我也没有看到像我在第一个版本中那样的任何寻呼机。
谢谢,希望有人可以指出我正确的方向。
编辑:
我复制了你的javascript但仍然没有分页..这是我的php输出html:
function rri_function($type = 'rri_function') {
$args = array(
'post_type' => 'rri_images',
'posts_per_page' => 5
);
$result = '<div class="rri-carousel owl-theme">';
//the loop
$loop = new WP_Query($args);
while ($loop->have_posts()) {
$loop->the_post();
$the_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), $type);
$result .= '<div><img src="' . $the_url[0] . '" title="' . get_the_title() . '" data-thumb="' . $the_url[0] . '" alt="' . get_the_title() . '"></div>';
}
$result .= '</div>';
return $result;
}
以下是打印在页面上的内容:
上一页 下一个答案 0 :(得分:2)
我是javascript的新手,但这对我有用。猫头鹰旋转木马2有不同的CSS类: .owl-dots .owl-dot 而不是 .owl-controls .owl-pagination .owl-page
我还将 this.owl.userItems 更改为 $('。owl-item')以选择每个轮播项目(不确定这是否是合适的解决方案)。
$(document).ready(function () {
function customPager() {
$.each($('.owl-item'), function (i) {
var titleData = jQuery(this).find('img').attr('title');
var paginationLinks = jQuery('.owl-dots .owl-dot span');
$(paginationLinks[i]).append(titleData);
});
}
$('.rri-carousel').owlCarousel({
loop : true,
items : 1,
nav : false,
onInitialized : customPager,
});
});
编辑:我删除了 onResized:customPager 参数,因为在调整浏览器窗口大小时,它会在现有的链接之后重复添加新链接。但是我并不感觉这个参数的目的是什么。
答案 1 :(得分:0)
错误表明&#39; owl&#39;没有在&#39;这个&#39;又名customPager函数。实际上没有名为&#39; owl&#39;在代码中的任何位置定义。我抬头看了一下owl-carousel 2.0的文档,我想你需要这样的东西。
var owl = $('.rri-carousel');
我没有看到任何名为&#39; userItems&#39;的变量。在文档中。但是您可以使用jquery来访问元素。把事情放在眼里,
$(document).ready(function () {
var owl = $('.rri-carousel');
function customPager() {
$.each($(owl).find('.item'), function (i) {
var titleData = jQuery(this).find('img').attr('title');
var paginationLinks = jQuery('.owl-controls .owl-pagination .owl-page span');
$(paginationLinks[i]).append(titleData);
});
}
owl.owlCarousel({
loop : true,
items : 1,
nav : false,
onInitialized : customPager,
onResized : customPager
});
});
我无法完全测试它是否正常工作,因为我没有使用你的html进行测试,但我的机器上的代码没有任何问题