Question

我正在使用Uno slider，我有一些标题，我想在一张幻灯片中显示每个“n”个数字，目前它只显示每张幻灯片一个标题，有没有办法在一张幻灯片中放置多个项目？

Html标记：

<div class="article-content-holder">
<ul class="article-titles-holder">
    <li>title </li>
    <li>title </li>
    <li>title </li>
    <li>title </li>
    <li>title </li>
    <li>title </li>
    <li>title </li>
    <li>title </li>
    <li>title </li>
    <li>title </li>
    <li>title </li>
    <li>title </li>
    <li>title </li>
    <li>title </li>
</ul>
<div class="unoSliderNav"></div>
</div>

这是Fiddle

有没有办法在不触及核心的情况下做到这一点，那会很棒。感谢。

Answer 1

好吧，我为此找到了一个解决方案：首先将div中的每个n元素包含在某个类中：

    var titles = $(".article-titles-holder li");
for(var i = 0; i < titles.length; i+=10) {
  titles.slice(i, i+10).wrapAll("<div class='title-slide'></div>");
}

然后附加Uno Slider并选择你的div类：

window.unoSlider = $('#titles-holder').unoSlider({
                                                         selector:".title-slide"
                                                         });

就是这样，它在一张幻灯片中显示每个n（在这种情况下为10）元素

Answer 2

默认情况下，滑块仅定位<li>元素。可以选择将其他选择器传递到.unoSlider()函数，因此请尝试this。每张幻灯片都必须是不同的，以便插件的.find()调用可以找到它们。用一个简单的选择器。

在一张幻灯片的内容滑块中显示每n个标题

这是Fiddle

2 个答案: