如何在jQuery Cycle 2 Div元素幻灯片上添加分页？

debugcn 发表于 Dev

阿甘

我正在使用jQuery Cycle 2在此处创建滑块。

这是我正在使用的代码：

<div class="cycle-slideshow" 
data-cycle-fx="fade" 
data-cycle-timeout="5000"
data-cycle-pager="#custom-pager"
data-cycle-pager-template="<strong><a href=#> {{slideNum}} </a></strong>"
data-cycle-slides="> div"
>

<div>
  <div class="cycle-pager"></div>
        <img src="http://slp.opteradev.com/images/uploads/sliders/Purple_Pixie%C2%AE_Loropetalum-_Carmen_Favorite.jpeg" alt="Carmen&#8217;s Favorites photographs" class="img-responsive" />
        <p class="slider-caption"><p><strong>1. Purple Pixie&reg; Loropetalum</strong></p>

<p>A garden favorite of many,&nbsp;Purple Pixie&reg; Loropetalum&nbsp;is an excellent choice for a versatile, dwarf size, weeping loropetalum. &nbsp;You can use Purple Pixie as a groundcover, hanging basket, or a window box. This loropetalum offers rich purple foliage and, in spring, features showy magenta ribbon-like blooms.&nbsp;</p></p>
</div>

<div>
  <div class="cycle-pager"></div>
        <img src="http://slp.opteradev.com/images/uploads/sliders/Flirt%E2%84%A2_Nandina_-_Carmen_Favorite.jpeg" alt="Carmen&#8217;s Favorites photographs" class="img-responsive" />
        <p class="slider-caption"><p><strong>2. Flirt&trade; Nandina</strong></p>

<p>Flirt&trade; Nandina&nbsp;features stunning, deep red new growth that accentuates the evergreen leaves. One of the best things about Flirt is that it keeps its beautiful color throughout summer unlike similar varieties. This nandina can be used as an accent, container planting, or a mass planting.&nbsp;</p></p>
</div>

<div>
  <div class="cycle-pager"></div>
        <img src="http://slp.opteradev.com/images/uploads/sliders/Mojo%C2%AE_Pittosporum_-_Carmen_Favorite.jpeg" alt="Carmen&#8217;s Favorites photographs" class="img-responsive" />
        <p class="slider-caption"><p><strong>3. Mojo&reg; Pittosporum</strong></p>

<p>Mojo&reg; Pittosporum&nbsp;offers so many great attributes. In the spring, its lovely dense green and yellow foliage is accompanied by orange blossom scented blooms. Mojo&reg; is perfect for foundation plantings and hedges &ndash; and thrives well in coastal areas too! In addition,&nbsp;Mojo&reg; is heat tolerant, drought tolerant and water-wise. &nbsp;</p></p>
</div>

<div>
  <div class="cycle-pager"></div>
        <img src="http://slp.opteradev.com/images/uploads/sliders/Bronze_Beauty%E2%84%A2_Cleyera_-_Carmen_Favorite.jpeg" alt="Carmen&#8217;s Favorites photographs" class="img-responsive" />
        <p class="slider-caption"><p><strong>4. Bronze Beauty&trade; Cleyera</strong></p>

<p>What a beauty!&nbsp;Bronze Beauty&trade; Cleyera&nbsp;makes an ideal hedge with its rich bronze and green foliage and uniform look. Bronze Beauty isn&#39;t hard to please &ndash; it enjoys sun or shade and is heat tolerant.&nbsp;</p></p>
</div>

</div><!-- /.cycle-slideshow -->

我遇到的问题是，因为我使用div元素而不是img作为幻灯片对象，所以寻呼机代码（也包含在div中）被视为幻灯片元素，并显示为序列中的最后一张幻灯片，而不是作为寻呼机元素。

我在这里查看了传呼机上的信息，但没有看到关于我的特殊情况的任何信息。

在解决此问题方面的任何帮助，我将不胜感激。

迪伦

看一下链接的示例，问题在于，在选择slide元素时，您需要更加具体。data-cycle-slides="> div"选择包括您的寻呼机的滑块的子div。您可以通过在幻灯片元素中添加一个类，然后像这样选择它们来解决此问题：data-cycle-slides="div.slide"。将寻呼机移到滑块之外也可以。

在您的问题中包含的html代码中，每张幻灯片中都错误地包含了寻呼机。您只需要在滑块中包含一次即可，而不是实际的滑块元素。

这是一个例子：

<div class="cycle-slideshow" 
    data-cycle-fx="fade" 
    data-cycle-timeout="5000"
    data-cycle-pager="#custom-pager"
    data-cycle-pager-template="<strong><a href=#>{{slideNum}}</a></strong>"
    data-cycle-slides="div.slide"
    >
    <!-- empty element for pager links -->
    <div id="custom-pager"></div>

    <div class="slide"><img src="http://malsup.github.io/images/p1.jpg"></div>
    <div class="slide"><img src="http://malsup.github.io/images/p2.jpg"></div>
    <div class="slide"><img src="http://malsup.github.io/images/p3.jpg"></div>
    <div class="slide"><img src="http://malsup.github.io/images/p4.jpg"></div>
</div>

这是一个小提琴。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。