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

Question

我使用jQuery Cycle 2创建滑块here。

这里是我使用的代码：

<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 ）被视为幻灯片元素，并显示为序列中的最后一张幻灯片，而不是作为寻呼机元素。

我查阅了关于寻呼机here的信息，但没有看到有关我的特殊情况的任何信息。

我将不胜感激关于如何解决此问题的任何帮助。

Answer 1

看着你的linked example，问题是你需要在选择幻灯片元素时更加具体。 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> 

，这里是一个fiddle。