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。

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

1 个答案: