Question

我目前正在使用jQuery Superslides，并希望在包装器div之外移动分页。现在，分页位于我的图像之上，我想在下面移动分页。我已经尝试了insertAfer容器，它可以工作，但它会抛出分页幻灯片顺序。

之前有没有人遇到过这个问题？我假设必须调整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');
});

在jquery SuperSlides中将幻灯片 - 容器包装器外部的Pagination移动

1 个答案: