在Glide.js中使用按钮代替默认导航的问题

Issue using Buttons instead of default navigation with Glide.js

本文关键字：默认 导航 问题 按钮 js Glide      更新时间：2023-09-26

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

有人知道我该如何实现这个吗?

我刚刚解决了这个问题。也许对想做同样事情的人有帮助。这很简单，我不知道为什么我一开始没有弄明白。

基本初始化滑块如下:

$('.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>
相关文章：