CODEWITHSUNDEEP
jqueryjquery-pluginsjquery-cycle2
forrest
forrest

Reputation: 10972

How do I add pagination on jQuery Cycle 2 Div element slides?

I am using jQuery Cycle 2 to create a slider here.

Here is the code I am using:

<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 -->

The problem I am having is that because I am using div elements rather than img as the slide object the pager code (which is also contained in a div) is perceived as a slide element and shows as the last slide in the sequence, rather than as a pager element.

I reviewed the information on pagers here, but don't see anything about my particular situation.

I would appreciate any assistance on how to resolve this.

Upvotes: 0

Views: 2055

Answers (1)

Dylan
Dylan

Reputation: 288

Looking at your linked example, the problem is that you need to be more specific when selecting the slide element. data-cycle-slides="> div" selects the child divs of the slider including your pager. You could fix this by adding a class to your slide elements and then selecting them like so: data-cycle-slides="div.slide". Moving the pager outside of the slider would also work.

In the html code included in your question, the pager is incorrectly included in each slide. You only need to include it once in the slider and not the actual slide elements.

Here's an example:

<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>

and here's a fiddle.

Upvotes: 1

Related Questions