javascript - 我不知道如何更改此 slider 的箭头(左右)

Question

我在网络上找到了一个效果很好的 slider 插件，但我就是找不到如何更改箭头(左箭头和右箭头)的方法。别对我太苛刻。我不是专业的开发人员；)。

希望你们能帮助我:)

问候

    /*
 * File: jquery.flexisel.js
 * Version: 2.2.0
 * Description: Responsive carousel jQuery plugin
 * Author: 9bit Studios
 * Copyright 2016, 9bit Studios
 * http://www.9bitstudios.com
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

(function ($) {

    $.fn.flexisel = function (options) {

        var defaults = $.extend({
            visibleItems: 4,
            itemsToScroll: 3,
            animationSpeed: 400,
            infinite: true,
            navigationTargetSelector: null,
            autoPlay: {
                enable: false,
                interval: 5000,
                pauseOnHover: true
            },
            responsiveBreakpoints: {
                portrait: {
                    changePoint: 480,
                    visibleItems: 1,
                    itemsToScroll: 1
                },
                landscape: {
                    changePoint: 640,
                    visibleItems: 2,
                    itemsToScroll: 2
                },
                tablet: {
                    changePoint: 768,
                    visibleItems: 3,
                    itemsToScroll: 3
                }
            },
            loaded: function () {},
            before: function () {},
            after: function () {}
        }, options);

        /******************************
        Private Variables
        *******************************/

        var object = $(this);
        var settings = $.extend(defaults, options);
        var itemsWidth;
        var canNavigate = true;
        var itemCount;
        var itemsVisible = settings.visibleItems;
        var itemsToScroll = settings.itemsToScroll;
        var responsivePoints = [];
        var resizeTimeout;
        var autoPlayInterval;

        /******************************
        Public Methods
        *******************************/

        var methods = {

            init: function () {
                return this.each(function () {
                    methods.appendHTML();
                    methods.setEventHandlers();
                    methods.initializeItems();
                });
            },

            /******************************
            Initialize Items
            *******************************/

            initializeItems: function () {

                var obj = settings.responsiveBreakpoints;
                for (var i in obj) {
                    responsivePoints.push(obj[i]);
                }
                responsivePoints.sort(function (a, b) {
                    return a.changePoint - b.changePoint;
                });
                var childSet = object.children();
                itemsWidth = methods.getCurrentItemWidth();
                itemCount = childSet.length;
                childSet.width(itemsWidth);
                object.css({
                    'left': -itemsWidth * (itemsVisible + 1)
                });
                object.fadeIn();
                $(window).trigger('resize');
                settings.loaded.call(this, object);

            },

            /******************************
            Append HTML
            *******************************/

            appendHTML: function () {

                object.addClass("nbs-flexisel-ul");
                object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>");
                object.find("li").addClass("nbs-flexisel-item");

                if (settings.navigationTargetSelector && $(settings.navigationTargetSelector).length > 0) {
                    $("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").appendTo(settings.navigationTargetSelector);
                } else {
                    settings.navigationTargetSelector = object.parent();
                    $("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").insertAfter(object);
                }

                if (settings.infinite) {
                    var childSet = object.children();
                    var cloneContentBefore = childSet.clone();
                    var cloneContentAfter = childSet.clone();
                    object.prepend(cloneContentBefore);
                    object.append(cloneContentAfter);
                }

            },


            /******************************
            Set Event Handlers
            *******************************/
            setEventHandlers: function () {

                var childSet = object.children();

                $(window).on("resize", function (event) {
                    canNavigate = false;
                    clearTimeout(resizeTimeout);
                    resizeTimeout = setTimeout(function () {
                        canNavigate = true;
                        methods.calculateDisplay();
                        itemsWidth = methods.getCurrentItemWidth();
                        childSet.width(itemsWidth);

                        if (settings.infinite) {
                            object.css({
                                'left': -itemsWidth * Math.floor(childSet.length / 2)
                            });
                        } else {
                            methods.clearDisabled();
                            $(settings.navigationTargetSelector).find(".nbs-flexisel-nav-left").addClass('disabled');
                            object.css({
                                'left': 0
                            });
                        }
                    }, 100);

                });

                $(settings.navigationTargetSelector).find(".nbs-flexisel-nav-left").on("click", function (event) {
                    methods.scroll(true);
                });

                $(settings.navigationTargetSelector).find(".nbs-flexisel-nav-right").on("click", function (event) {
                    methods.scroll(false);
                });

                if (settings.autoPlay.enable) {

                    methods.setAutoplayInterval();

                    if (settings.autoPlay.pauseOnHover === true) {
                        object.on({
                            mouseenter: function () {
                                canNavigate = false;
                            },
                            mouseleave: function () {
                                canNavigate = true;
                            }
                        });
                    }

                }

                object[0].addEventListener('touchstart', methods.touchHandler.handleTouchStart, false);
                object[0].addEventListener('touchmove', methods.touchHandler.handleTouchMove, false);

            },

            /******************************
            Calculate Display
            *******************************/

            calculateDisplay: function () {
                var contentWidth = $('html').width();
                var largestCustom = responsivePoints[responsivePoints.length - 1].changePoint; // sorted array 

                for (var i in responsivePoints) {

                    if (contentWidth >= largestCustom) { // set to default if width greater than largest custom responsiveBreakpoint 
                        itemsVisible = settings.visibleItems;
                        itemsToScroll = settings.itemsToScroll;
                        break;
                    } else { // determine custom responsiveBreakpoint to use

                        if (contentWidth < responsivePoints[i].changePoint) {
                            itemsVisible = responsivePoints[i].visibleItems;
                            itemsToScroll = responsivePoints[i].itemsToScroll;
                            break;
                        } else {
                            continue;
                        }
                    }
                }

            },

            /******************************
            Scroll
            *******************************/

            scroll: function (reverse) {

                if (typeof reverse === 'undefined') {
                    reverse = true
                }

                if (canNavigate == true) {
                    canNavigate = false;
                    settings.before.call(this, object);
                    itemsWidth = methods.getCurrentItemWidth();

                    if (settings.autoPlay.enable) {
                        clearInterval(autoPlayInterval);
                    }

                    if (!settings.infinite) {

                        var scrollDistance = itemsWidth * itemsToScroll;

                        if (reverse) {
                            object.animate({
                                'left': methods.calculateNonInfiniteLeftScroll(scrollDistance)
                            }, settings.animationSpeed, function () {
                                settings.after.call(this, object);
                                canNavigate = true;
                            });

                        } else {
                            object.animate({
                                'left': methods.calculateNonInfiniteRightScroll(scrollDistance)
                            }, settings.animationSpeed, function () {
                                settings.after.call(this, object);
                                canNavigate = true;
                            });
                        }



                    } else {
                        object.animate({
                            'left': reverse ? "+=" + itemsWidth * itemsToScroll : "-=" + itemsWidth * itemsToScroll
                        }, settings.animationSpeed, function () {
                            settings.after.call(this, object);
                            canNavigate = true;

                            if (reverse) {
                                methods.offsetItemsToBeginning(itemsToScroll);
                            } else {
                                methods.offsetItemsToEnd(itemsToScroll);
                            }
                            methods.offsetSliderPosition(reverse);

                        });
                    }

                    if (settings.autoPlay.enable) {
                        methods.setAutoplayInterval();
                    }

                }
            },

            touchHandler: {

                xDown: null,
                yDown: null,
                handleTouchStart: function (evt) {
                    this.xDown = evt.touches[0].clientX;
                    this.yDown = evt.touches[0].clientY;
                },
                handleTouchMove: function (evt) {
                    if (!this.xDown || !this.yDown) {
                        return;
                    }

                    var xUp = evt.touches[0].clientX;
                    var yUp = evt.touches[0].clientY;

                    var xDiff = this.xDown - xUp;
                    var yDiff = this.yDown - yUp;

                    // only comparing xDiff
                    // compare which is greater against yDiff to determine whether left/right or up/down  e.g. if (Math.abs( xDiff ) > Math.abs( yDiff ))
                    if (Math.abs(xDiff) > 0) {
                        if (xDiff > 0) {
                            // swipe left
                            methods.scroll(false);
                        } else {
                            //swipe right
                            methods.scroll(true);
                        }
                    }

                    /* reset values */
                    this.xDown = null;
                    this.yDown = null;
                    canNavigate = true;
                }
            },

            /******************************
            Utility Functions
            *******************************/

            getCurrentItemWidth: function () {
                return (object.parent().width()) / itemsVisible;
            },

            offsetItemsToBeginning: function (number) {
                if (typeof number === 'undefined') {
                    number = 1
                }
                for (var i = 0; i < number; i++) {
                    object.children().last().insertBefore(object.children().first());
                }
            },

            offsetItemsToEnd: function (number) {
                if (typeof number === 'undefined') {
                    number = 1
                }
                for (var i = 0; i < number; i++) {
                    object.children().first().insertAfter(object.children().last());
                }
            },

            offsetSliderPosition: function (reverse) {
                var left = parseInt(object.css('left').replace('px', ''));
                if (reverse) {
                    left = left - itemsWidth * itemsToScroll;
                } else {
                    left = left + itemsWidth * itemsToScroll;
                }
                object.css({
                    'left': left
                });
            },

            getOffsetPosition: function () {
                return parseInt(object.css('left').replace('px', ''));
            },

            calculateNonInfiniteLeftScroll: function (toScroll) {

                methods.clearDisabled();
                if (methods.getOffsetPosition() + toScroll >= 0) {
                    $(settings.navigationTargetSelector).find(".nbs-flexisel-nav-left").addClass('disabled');
                    return 0;
                } else {
                    return methods.getOffsetPosition() + toScroll;
                }
            },

            calculateNonInfiniteRightScroll: function (toScroll) {

                methods.clearDisabled();
                var negativeOffsetLimit = (itemCount * itemsWidth) - (itemsVisible * itemsWidth);

                if (methods.getOffsetPosition() - toScroll <= -negativeOffsetLimit) {
                    $(settings.navigationTargetSelector).find(".nbs-flexisel-nav-right").addClass('disabled');
                    return -negativeOffsetLimit;
                } else {
                    return methods.getOffsetPosition() - toScroll;
                }
            },

            setAutoplayInterval: function () {
                autoPlayInterval = setInterval(function () {
                    if (canNavigate) {
                        methods.scroll(false);
                    }
                }, settings.autoPlay.interval);
            },

            clearDisabled: function () {
                var parent = $(settings.navigationTargetSelector);
                parent.find(".nbs-flexisel-nav-left").removeClass('disabled');
                parent.find(".nbs-flexisel-nav-right").removeClass('disabled');
            }

        };

        if (methods[options]) { // $("#element").pluginName('methodName', 'arg1', 'arg2');
            return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof options === 'object' || !options) { // $("#element").pluginName({ option: 1, option:2 });
            return methods.init.apply(this);
        } else {
            $.error('Method "' + method + '" does not exist in flexisel plugin!');
        }
    };

})(jQuery);

        $(window).load(function () {
            $("#flexiselDemo1").flexisel();

            $("#flexiselDemo2").flexisel({
                visibleItems: 4,
                itemsToScroll: 3,
                animationSpeed: 200,
                infinite: true,
                navigationTargetSelector: null,
                autoPlay: {
                    enable: false,
                    interval: 5000,
                    pauseOnHover: true
                },
                responsiveBreakpoints: {
                    portrait: {
                        changePoint: 480,
                        visibleItems: 1,
                        itemsToScroll: 1
                    },
                    landscape: {
                        changePoint: 640,
                        visibleItems: 2,
                        itemsToScroll: 2
                    },
                    tablet: {
                        changePoint: 768,
                        visibleItems: 3,
                        itemsToScroll: 3
                    }
                },
                loaded: function (object) {
                    console.log('Slider loaded...');
                },
                before: function (object) {
                    console.log('Before transition...');
                },
                after: function (object) {
                    console.log('After transition...');
                }
            });



        });
    

p {
    margin-bottom: 20px;
}

.clearout {
    height: 20px;
    clear: both;
}

#flexiselDemo1,
#flexiselDemo2,
#flexiselDemo3 {
    display: none;
}

.nbs-flexisel-container {
    position: relative;
    max-width: 100%;
}

.nbs-flexisel-ul {
    position: relative;
    width: 99999px;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    text-align: center;
}

.nbs-flexisel-inner {
    position: relative;
    overflow: hidden;
    float: left;
    width: 100%;
}

.nbs-flexisel-item {
    float: left;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    position: relative;
    line-height: 0px;
}

.nbs-flexisel-item img {
    max-width: 100%;
    cursor: pointer;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
}


/*** Navigation ***/

.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
    position: absolute;
    cursor: pointer;
    z-index: 4;
    top: 40%;
    color: #000;
}

.nbs-flexisel-nav-left {
    left: 10px;
}

.nbs-flexisel-nav-left:before {
    content: "<"
}

.nbs-flexisel-nav-left.disabled {
    opacity: 0.4;
}

.nbs-flexisel-nav-right {
    right: 5px;
}

.nbs-flexisel-nav-right:before {
    content: ">"
}

.nbs-flexisel-nav-right.disabled {
    opacity: 0.4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul id="flexiselDemo1">
        <li><img src="images/logo-nyt.png" /></li>
        <li><img src="images/logo-microsoft.png" /></li>
        <li><img src="images/logo-ebay.png" /></li>
        <li><img src="images/logo-hp.png" /></li>
        <li><img src="images/logo-youtube.png" /></li>
    </ul>

Answer 1

文档中列出了一个回调，但我能看到的最简单的方法是覆盖 css 中 nav-left 和 nav-right 元素的 before pseudo:

.nbs-flexisel-nav-left::before {
  content: 'x';
}

.nbs-flexisel-nav-right::before {
  content: 'x';
}

我已将它们更改为“x”，但如果您喜欢字体字符，您可以将实体放在这里，例如 Font Awesome。

The slider demo is here , 和 the documentation is here .