javascript - 如何使用 Royalslider 的自定义导航按钮

Question

我有一个(皇家) slider ，我需要使用下一个/上一个导航按钮离开 slider div。假设我的页脚中有导航导航按钮。

<div class="my-prev-button"></div>
<div class="my-next-button"></div>

这里有一些文档，但我不知道如何使用它! http://dimsemenov.com/plugins/royal-slider/documentation/#api

如何使这两个按钮与 slider 一起使用(当 slider 位于外部时)

<script id="addJS">
jQuery(document).ready(function($) {
  $('#slider-with-blocks').royalSlider({
    arrowsNav: true,
    arrowsNavAutoHide: false,
    fadeinLoadedSlide: false,
    controlNavigationSpacing: 0,
    controlNavigation: 'none',
    imageScaleMod: 'none',
    autoScaleSlider: false,
    imageScalePadding: 0,
    slidesSpacing: 0,
    autoHeight: false, 
    blockLoop: true,
    loop: true,
    numImagesToPreload: 4,
    transitionType: 'fade',
    autoPlay: {
        enabled: true,
        pauseOnHover: false,        
    },
    block: {
        delay: 400
    }
  });
});
</script>

<div class="slider">
    <div id="slider-with-blocks" class="royalSlider rsMinW">
        <div class="rsContent" data-rsDelay="5000">
        some div and img here..
        </div>
    </div>
</div>

Answer 1

根据您的需要设置下一个和上一个 div 的样式，并在初始化 Royal-slider 后使用以下代码:

// get hold of royal-slider object
var slider = $('#slider-with-blocks').data('royalSlider');
// previous button
$('.my-prev-button').on('click', function(){
   slider.prev();
});
$('.my-next-button').on('click', function(){
   slider.next();
});

您可以在这里找到更多 API http://dimsemenov.com/plugins/royal-slider/documentation/#api