上一个/下一个导航图像滑块（最小滑块）

Question

我不知道关于javascript的事情，我需要你的帮助在我的滑块中添加上一个/下一个导航...通常，我在这里找到了很多有用的答案，所以也许，有人会成为我的救星： ） 我使用joomla 2.5和SP智能滑块与迷你模板。它有一个导航，但不是我想要的。每张照片都有一个点，但我喜欢上一个/下一个按钮。

这里是php文件的代码：

jQuery(function($){
$('#sp-smart-slider<?php echo $module->id?> .minima-slider').minimaSlider({
autoplay  : <?php echo $option['autoplay']?>,
duration  : <?php echo $option['interval']?>,
fullWidth : false,
rWidth : 135,
rHeight : 58,
preloadImages:[<?php
foreach($data as $index=>$value) $images[] = "'".JURI::root().$value['image']."'";
echo implode(',',$images);
?>],
});


$('.layout-minima .slider-controllers > ul li').on('click',function(event){
event.stopPropagation();
$('#sp-smart-slider<?php echo $module->id?> .minima-    slider').minimaSlider('goTo',         $(this).index() );
$(this).parent().find('>li').removeClass('active');
$(this).addClass('active');

});

$('#sp-smart-slider<?php echo $module->id?> .minima-slider').minimaSlider('onSlide',     function(index){
$('.layout-minima .slider-controllers > ul li').removeClass('active');
$('.layout-minima .slider-controllers > ul li').get(index).addClass('active');
});



});


<div class="slider-controllers">
<ul>
<?php foreach($data as $i=>$v){ ?>
<li class="<?php echo ($i==0)?'active':'' ?>">
<a href="javascript:;"></a>
</li>
<?php } ?>
<ul>
</div>

---

这里是我的js文件的代码：

/**
 * @author    JoomShaper http://www.joomshaper.com
 * @copyright Copyright (C) 2010 - 2013 JoomShaper
 * @license   http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2
 */;
(function ($) {
var methods = {
    currentIndex: 0,
    totalItems: 0,
    settings: {},
    canvasWidth: 0,
    canvasHeight: 0,
    elements: '',
    prevIndex: function () {
        var c = this.currentIndex;
        c--;
        if (c < 0)
            c = this.totalItems - 1;
        return c;
    },
    nextIndex: function () {
        var c = this.currentIndex;
        c++;
        if (c >= (this.totalItems))
            c = 0;
        return c;
    },

    currentIndex: function () {
        return this.currentIndex;
    },

    prev: function () {
        clearTimeout(this.autoplay);
        this.currentIndex--;
        if (this.currentIndex < 0) this.currentIndex = this.totalItems - 1;
        var $this = this;
        methods['run'].call(this);
    },

    next: function () {
        clearTimeout(this.autoplay);
        this.currentIndex++;
        if (this.currentIndex >= (this.totalItems)) this.currentIndex = 0;
        methods['run'].call(this);
    },

    play: function () {
        var $this = this;
        this.autoplay = setTimeout(function () {
            methods['next'].call($this);
        }, 1000);
    },


    preloader: function () {
        var loadedImage = new Image();
        var preloadImages = this.settings.preloadImages; // should array
        var $this = this;

        this.items.removeClass(this.settings.animateInClass).addClass(this.settings.animateOutClass);

        if (this.settings.showPreloader != true || preloadImages.length < 1) {
            $(this.settings.preloader).remove();
            methods['run'].call(this);
            this.elements.trigger('onSlide');
        } else {
            for (i = 0; i < preloadImages.length; i++) loadedImage.src = preloadImages[i];
            $(loadedImage).load(function () {
                $($this.settings.preloader).fadeOut('fast', function () {
                    $(this).remove()
                });
                methods['run'].call($this);
                $this.elements.trigger('onSlide');
            });
        }
    },

    autoplay: function () {

        var $this = this;
        if (this.settings.autoplay == true) {
            this.autoplay = setTimeout(function () {
                methods['next'].call($this);
            }, this.settings.duration);
        }
    },

    pause: function () {
        clearTimeout(this.autoplay);
    },

    goTo: function (index) {
        clearTimeout(this.autoplay);
        this.currentIndex = index;
        methods['run'].call(this);
    },

    run: function () {
        clearTimeout(this.delay);
        var $this = this;
        var $item = this.items.removeClass(this.settings.animateInClass).addClass(this.settings.animateOutClass);

        this.delay = setTimeout(function () {
            $item.eq($this.currentIndex)
                .removeClass($this.settings.animateOutClass)
                .addClass($this.settings.animateInClass);
            $this.elements.trigger('onSlide');
        }, this.settings.delay);

        methods['autoplay'].call(this);
    },

    resize: function (fn) {

        if (this.settings.fullWidth == true) {
            this.elements.height($(window).width() * this.ratioHeight);
        }
    },

    onSlide: function (fn) {
        var $this = this;
        this.elements.bind('onSlide', function (event) {
            fn($this.currentIndex, $this.items, event);
        });
    },

    init: function (elements, settings) {
        this.currentIndex = 0;
        this.elements = elements;
        this.items = $(elements).find('>*');


        this.totalItems = this.items.length;
        this.settings = settings;


        this.canvasWidth = this.settings.canvasWidth;
        this.canvasHeight = this.settings.canvasHeight;

        this.ratioHeight = this.settings.rHeight / this.settings.rWidth;
        this.ratioWidth = this.settings.rWidth / this.settings.rHeight;


        this.elements.width(this.canvasWidth);
        this.elements.height(this.canvasHeight);


        var $this = this;
        this.items.each(function (i) {
            $(this).addClass($this.settings.itemClassPrefix + (i + 1));
        });
    },

};

$.fn.minimaSlider = function (options, param) {

    var settings = $.extend({
        preloadImages: [],
        autoplay: true,
        preloader: '.sp-preloader',
        showPreloader: true,
        duration: 5000,
        delay: 400,
        itemClassPrefix: 'item-',
        rWidth: 0,
        rHeight: 0,
        fullWidth: false,
        animateInClass: 'animate-in',
        animateOutClass: 'animate-out',
    }, options);

    return this.each(function (index, element) {

        if (typeof (options) === 'string') {
            methods[options].call(this, param);
        } else {
            methods['init'].call(this, $(this), settings);
            methods['preloader'].call(this);
            methods['autoplay'].call(this);
            methods['resize'].call(this);
        }
    });
}
})(jQuery);

非常感谢那些能帮助我的人，并为我的英语感到抱歉......