Question

我使用rhinoslider作为页面滑块。我想用我自己的按钮来滑动页面，因为我想把我的按钮作为页脚，所以它会留在底部的屏幕上。到目前为止，我一直试图破解rhinoslider js，但仍然无法做到。

这里是我想要自定义的html和rhinoslider.js文件的代码片段：

html文件：

<nav class="navbar navbar-fixed-bottom">
  <div class="container">
    <div class="row control_panel">
        <div class="col-md-6 col-xs-6">
            <!--input class="rhino-btn rhino-prev" type="button" id="prev_btn" style="float: left"-->
            <button id="prev_btn" class="rhino-btn rhino-prev" style="float: left"></button>
        </div>
        <div class="col-md-6 col-xs-6">
            <!--input class="rhino-btn rhino-next" type="button" id="next_btn" style="float: right"-->
            <button id="next_btn" class="rhino-btn rhino-next" style="float: right"></button>
        </div> 
    </div>   
  </div>
</nav>

rhinoslider.css

.rhino-btn {
    z-index:10;
    width:166px;
    height:52px;
    display:block;
    text-indent:-999%;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
}

.rhino-prev, .rhino-next { margin-top:25px; }

.rhino-prev {
    position:relative;
    left:-6px;
    background-image:url(../asset/images/prev_button.png)
}

.rhino-next {
    position:relative;
    right:-6px;
    background-image:url(../asset/images/next_button.png)
}

和rhinoslider的js文件：

    //init function
    init = function ($slider, settings, vars) {
        settings = setUpSettings(settings);

        $slider.wrap('<div class="' + vars.prefix + 'container">');
        vars.container = $slider.parent('.' + vars.prefix + 'container');
        vars.isPlaying = settings.autoPlay;

        //the string, which will contain the button-html-code
        var buttons = '';

        //add prev/next-buttons
        if (settings.controlsPrevNext) {
            vars.container.addClass(vars.prefix + 'controls-prev-next');
            buttons = '<a class="' + vars.prefix + 'prev ' + vars.prefix + 'btn">' + settings.prevText + '</a><a class="' + vars.prefix + 'next ' + vars.prefix + 'btn">' + settings.nextText + '</a>';
            vars.container.append(buttons);

            vars.buttons.prev = vars.container.find('.' + vars.prefix + 'prev');
            vars.buttons.next = vars.container.find('.' + vars.prefix + 'next');

            //add functionality to the "prev"-button
            vars.buttons.prev.click(function () {
                prev($slider, settings);

                //stop autoplay, if set
                if (settings.autoPlay) {
                    pause();
                }
            });

            **//this bit is where i want to access my custom id
            // and give it a same functionality as rhino button**
            $('#prev_btn').click(function () {
                prev($slider, settings);

                //stop autoplay, if set
                if (settings.autoPlay) {
                    pause();
                }
            });

            //add functionality to the "next"-button
            vars.buttons.next.click(function () {
                next($slider, settings);

                //stop autoplay, if set
                if (settings.autoPlay) {
                    pause();
                }
            });

            **//this bit is where i want to access my custom id
            // and give it a same functionality as rhino button**
            $('#next_btn').next.click(function () {
                next($slider, settings);

                //stop autoplay, if set
                if (settings.autoPlay) {
                    pause();
                }
            });                 
        }

是否可以这样做？

Answer 1

根据Rhinoslider documentation，您可以使用自己的按钮并调用API函数

 $('#slider').data('rhinoslider').pause();
 $('#slider').data('rhinoslider').play();
 $('#slider').data('rhinoslider').prev();
 $('#slider').data('rhinoslider').next();

您可以指定按钮onClick来运行这些功能

从jquery（rhinoslider）访问html元素

1 个答案: