我正在使用glide.js
库在我的网站上制作图片滑块。我想有三个预制按钮作为滑块按钮而不是默认导航。默认导航似乎使用<a>
标记。
浏览js
文件似乎在此处创建了默认导航:
Glide.prototype.navigation = function() {
this.navigation.items = {};
//CLASS
// Navigation wrapper
this.navigation.wrapper = $('<div />', {
'class': this.options.navigationClass
}).appendTo(
/**
* Setting append target
* If option is true set default target, that is slider wrapper
* Else get target set in options
* @type {Bool or String}
*/
(this.options.navigation === true) ? this.parent : this.options.navigation
);
//Navigation controls
for (var i = 0; i < this.slides.length; i++) {
this.navigation.items[i] = $('<li />', {
'href': '#',
'class': this.options.navigationItemClass,
// Direction and distance -> Item index forward
'data-distance': i
}).appendTo(this.navigation.wrapper);
}
// Add navCurrentItemClass to the first navigation item
this.navigation.items[0].addClass(this.options.navigationCurrentItemClass);
// If centered option is true
if (this.options.navigationCenter) {
// Center bullet navigation
this.navigation.wrapper.css({
'left': '50%',
'width': this.navigation.wrapper.children().outerWidth(true) * this.navigation.wrapper.children().length,
'margin-left': -(this.navigation.wrapper.outerWidth(true)/2)
});
}
};
我调整了代码,我用下面的代码替换了循环,使用我放在html
页面上的3个按钮,但它没有效果。我只是想知道我做错了什么,或者是否有可能?这是我对代码所做的更改:
this.navigation.items[0] = $('.b1', {
'href': '#',
'class': this.options.navigationItemClass,
'data-distance': 0
}).appendTo(this.navigation.wrapper);
this.navigation.items[1] = $('.b2', {
'href': '#',
'class': this.options.navigationItemClass,
'data-distance': 1
}).appendTo(this.navigation.wrapper);
this.navigation.items[2] = $('.b3', {
'href': '#',
'class': this.options.navigationItemClass,
'data-distance': 2
}).appendTo(this.navigation.wrapper);
有没有人知道如何实现这个?
答案 0 :(得分:0)
我刚刚解决了这个问题。对任何试图做同样事情的人都有帮助。这很容易,我不知道我最初是怎么想的。
基本上按如下方式初始化滑块:
$('.slider').glide({
autoplay: 5000,
arrows: 'none',
navigation: 'none'
});
获取API的实例:
var glide = $('.slider').glide().data('api_glide');
然后获取对每个按钮的引用,并编码单击按钮时要执行的所需操作:
$('.b1').click(function(){
console.log("Button 1 Clicked");
glide.jump(1, console.log('1'));
});
$('.b2').click(function(){
console.log("Button 2 Clicked");
glide.jump(2, console.log('2'));
});
$('.b3').click(function(){
console.log("Button 3 Clicked");
glide.jump(3, console.log('3'));
});
所有这些都假设您的页面上有三个按钮,如下所示:
<button class="b1" id="b1" name="b1" >Button 1</button>
<button class="b2" id="b2" name="b2">Button 2</button>
<button class="b3" id="b3" name="b3">Button 3</button>