在jquery SuperSlides中将分页移到幻灯片容器包装之外

Question

我目前正在使用jQuery Superslides，并希望将分页移到包装器div之外。现在，分页位于我的图像上方，我希望将分页移动到下方。我试过在容器中插入A，这是有效的，但它放弃了分页幻灯片顺序

以前有人遇到过这个问题吗？我认为superslide.js文件必须进行调整。。。

任何建议，或者如果有人遇到了这个问题，并且有一个解决方案，那将是非常棒的！

默认输出：

<div id="slides" style="position: relative; overflow: hidden; width: 100%; height: 594px;">
 <div class="slides-control" style="position: relative; height: 100%; width: 4995px; left: -1665px;">
 <nav class="slides-pagination">
  <a class="current" href="#1">1</a>
  <a href="#2">2</a>
  <a href="#3">3</a>
 </nav>
</div>
</div>

Answer 1

您应该自己输出自定义分页HTML，如下所示：

<nav class="slides-pagination">
    <a class="current" href="#1">1</a>
    <a href="#2">2</a>
    <a href="#3">3</a>
</nav>

然后禁用自动分页功能：

$('#slides').superslides({
    pagination: false
});

由于他们只将.current类附加到自动生成的菜单上，因此需要使用animated.slides事件复制此函数，如下所示：

$('#slides').superslides({
    pagination: false
}).on('animated.slides', function() { 
    var current_index = $(this).superslides('current');
    $('.slides-pagination a').removeClass('current');
    $('.slides-pagination a').eq(current_index).addClass('current');
});