Question

我正在使用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);

有没有人知道如何实现这个？

Answer 1

我刚刚解决了这个问题。对任何试图做同样事情的人都有帮助。这很容易，我不知道我最初是怎么想的。

基本上按如下方式初始化滑块：

$('.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>

使用按钮而不是使用Glide.js的默认导航问题

1 个答案: