Flexslider按钮导航
Flexslider bulete navigation
我正在使用flexslider来创建一个自定义滑块。我只想获取用户点击项目导航部分时的滑动数字。
我在controlNavigation部分尝试了各种方法
controlNav: {
setup: function() {
if (!slider.manualControls) {
methods.controlNav.setupPaging();
} else { // MANUALCONTROLS:
methods.controlNav.setupManual();
}
},
setupPaging: function() {
var type = (vars.controlNav === "thumbnails") ? 'control-thumbs' : 'control-paging',
j = 1,
item;
slider.controlNavScaffold = $('<ol class="'+ namespace + 'control-nav ' + namespace + type + '"></ol>');
if (slider.pagingCount > 1) {
for (var i = 0; i < slider.pagingCount; i++) {
item = (vars.controlNav === "thumbnails") ? '<img src="' + slider.slides.eq(i).attr("data-thumb") + '"/>' : '<a>' + j + '</a>';
slider.controlNavScaffold.append('<li>' + item + '</li>');
j++;
}
}
// CONTROLSCONTAINER:
(slider.controlsContainer) ? $(slider.controlsContainer).append(slider.controlNavScaffold) : slider.append(slider.controlNavScaffold);
methods.controlNav.set();
methods.controlNav.active();
slider.controlNavScaffold.delegate('a, img', eventType, function(event) {
event.preventDefault();
var $this = $(this),
target = slider.controlNav.index($this);
if (!$this.hasClass(namespace + 'active')) {
slider.direction = (target > slider.currentSlide) ? "next" : "prev";
slider.flexAnimate(target, vars.pauseOnAction);
}
});
// Prevent iOS click event bug
if (touch) {
slider.controlNavScaffold.delegate('a', "click touchstart", function(event) {
event.preventDefault();
});
}
},
setupManual: function() {
slider.controlNav = slider.manualControls;
methods.controlNav.active();
slider.controlNav.live(eventType, function(event) {
event.preventDefault();
var $this = $(this),
target = slider.controlNav.index($this);
if (!$this.hasClass(namespace + 'active')) {
(target > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev";
slider.flexAnimate(target, vars.pauseOnAction);
}
});
// Prevent iOS click event bug
if (touch) {
slider.controlNav.live("click touchstart", function(event) {
event.preventDefault();
});
}
},
set: function() {
var selector = (vars.controlNav === "thumbnails") ? 'img' : 'a';
slider.controlNav = $('.' + namespace + 'control-nav li ' + selector, (slider.controlsContainer) ? slider.controlsContainer : slider);
},
active: function() {
slider.controlNav.removeClass(namespace + "active").eq(slider.animatingTo).addClass(namespace + "active");
},
update: function(action, pos) {
if (slider.pagingCount > 1 && action === "add") {
slider.controlNavScaffold.append($('<li><a>' + slider.count + '</a></li>'));
} else if (slider.pagingCount === 1) {
slider.controlNavScaffold.find('li').remove();
} else {
slider.controlNav.eq(pos).closest('li').remove();
}
methods.controlNav.set();
(slider.pagingCount > 1 && slider.pagingCount !== slider.controlNav.length) ? slider.update(pos, action) : methods.controlNav.active();
}
},
但没有找到运气。如果有人知道如何实现这一点,请帮助我。
我找到了解决方案。这对我来说真的很浪费时间。在活动函数中,我们可以得到下一个动画幻灯片的编号,如下所示。(希望有一天这能帮助到像我一样的人)
active: function() { slider.controlNav.removeClass(namespace + "active").eq(slider.animatingTo).addClass(namespace + "active"); alert(slider.animatingTo) },
相关文章:
- Flexslider导航按钮在悬停时不可见,带有橙色框
- 有没有一种方法可以检测ios<>使用jquery和触发器操作形成导航按钮
- 为什么我的导航按钮或按钮文本不会移动到中心
- 从导航按钮 JavaScript 中删除动画
- 如何从super.simple.slider中删除左/右导航按钮
- 带有导航按钮的基本图像滑块插件
- 折叠导航按钮不适用于twitter引导程序设计的移动设备
- 使用导航按钮后,幻灯片需要暂停
- 单击我的导航按钮时切换我的菜单
- Jquery Fancybox 如何添加额外的导航按钮
- 照片滑动 - 无图库视图 - 没有导航按钮
- YUI 轮播导航按钮在排序列表下
- 如何仅在每次单击可滚动(jquery工具)中的导航按钮时加载图像,而不是一次加载所有图像
- 使用导航按钮制作基本 Javascript 幻灯片时出错
- 如何在动画完成之前停止按下导航按钮
- 离子导航按钮内的后退按钮
- jQuery选项卡:摆脱第二个选项卡上的“上一个”导航按钮
- 在导航按钮上设置 1 秒超时
- 引导 3 导航按钮,从切换到下拉列表
- 猫头鹰轮播导航按钮未显示