如何在 jQuery Cycle 2 Div 元素幻灯片上添加分页？
How do I add pagination on jQuery Cycle 2 Div element slides?
我正在使用 jQuery 循环 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’s Favorites photographs" class="img-responsive" />
<p class="slider-caption"><p><strong>1. Purple Pixie® Loropetalum</strong></p>
<p>A garden favorite of many, Purple Pixie® Loropetalum is an excellent choice for a versatile, dwarf size, weeping loropetalum. 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. </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’s Favorites photographs" class="img-responsive" />
<p class="slider-caption"><p><strong>2. Flirt™ Nandina</strong></p>
<p>Flirt™ Nandina 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. </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’s Favorites photographs" class="img-responsive" />
<p class="slider-caption"><p><strong>3. Mojo® Pittosporum</strong></p>
<p>Mojo® Pittosporum offers so many great attributes. In the spring, its lovely dense green and yellow foliage is accompanied by orange blossom scented blooms. Mojo® is perfect for foundation plantings and hedges – and thrives well in coastal areas too! In addition, Mojo® is heat tolerant, drought tolerant and water-wise. </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’s Favorites photographs" class="img-responsive" />
<p class="slider-caption"><p><strong>4. Bronze Beauty™ Cleyera</strong></p>
<p>What a beauty! Bronze Beauty™ Cleyera makes an ideal hedge with its rich bronze and green foliage and uniform look. Bronze Beauty isn't hard to please – it enjoys sun or shade and is heat tolerant. </p></p>
</div>
</div><!-- /.cycle-slideshow -->
我遇到的问题是，因为我使用 div 元素而不是 img 作为幻灯片对象，寻呼机代码（也包含在 div 中）被视为幻灯片元素并显示为序列中的最后一张幻灯片，而不是作为分页器元素。
我查看了寻呼机上的信息 here，但没有看到任何关于我的特殊情况的信息。
如能提供解决此问题的帮助，我将不胜感激。
查看您的 linked example，问题是您在选择幻灯片元素时需要更加具体。 data-cycle-slides="> div" 选择滑块的子 div，包括您的寻呼机。您可以通过向幻灯片元素添加 class 然后像这样选择它们来解决此问题：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。
我正在使用 jQuery 循环 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’s Favorites photographs" class="img-responsive" />
<p class="slider-caption"><p><strong>1. Purple Pixie® Loropetalum</strong></p>
<p>A garden favorite of many, Purple Pixie® Loropetalum is an excellent choice for a versatile, dwarf size, weeping loropetalum. 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. </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’s Favorites photographs" class="img-responsive" />
<p class="slider-caption"><p><strong>2. Flirt™ Nandina</strong></p>
<p>Flirt™ Nandina 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. </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’s Favorites photographs" class="img-responsive" />
<p class="slider-caption"><p><strong>3. Mojo® Pittosporum</strong></p>
<p>Mojo® Pittosporum offers so many great attributes. In the spring, its lovely dense green and yellow foliage is accompanied by orange blossom scented blooms. Mojo® is perfect for foundation plantings and hedges – and thrives well in coastal areas too! In addition, Mojo® is heat tolerant, drought tolerant and water-wise. </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’s Favorites photographs" class="img-responsive" />
<p class="slider-caption"><p><strong>4. Bronze Beauty™ Cleyera</strong></p>
<p>What a beauty! Bronze Beauty™ Cleyera makes an ideal hedge with its rich bronze and green foliage and uniform look. Bronze Beauty isn't hard to please – it enjoys sun or shade and is heat tolerant. </p></p>
</div>
</div><!-- /.cycle-slideshow -->
我遇到的问题是，因为我使用 div 元素而不是 img 作为幻灯片对象，寻呼机代码（也包含在 div 中）被视为幻灯片元素并显示为序列中的最后一张幻灯片，而不是作为分页器元素。
我查看了寻呼机上的信息 here，但没有看到任何关于我的特殊情况的信息。
如能提供解决此问题的帮助，我将不胜感激。
查看您的 linked example，问题是您在选择幻灯片元素时需要更加具体。 data-cycle-slides="> div" 选择滑块的子 div，包括您的寻呼机。您可以通过向幻灯片元素添加 class 然后像这样选择它们来解决此问题：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。