Search code examples
jqueryjquery-cycle2

jQuery Cycle 2 Pager not showing

I have a jQuery Cycle slider on this page and while the slider works perfectly the pager does not show up as it should

Here is the code for the slider:

<div id="slider" class="cycle-slideshow 
data-cycle-fx="fade" 
data-cycle-timeout="4000"
data-cycle-slides="> div">

<div class="slide">
<img src="http://192.254.149.221/~mmceda/images/plane_slider.jpg" alt="map" width="926" height="219" >
<div class="slide-info">
<h5>Our Assets...</h5>
<div class="short-black-line"></div>
<h6>Your Industries</h6>
<p>Monroeville’s pro-business environment continues to attract industry sectors for which it has special assets.</p>
<p><a class="read-more" href="./finance-incentives/">Read More &raquo;</a></p>
</div><!-- end .slide-info -->
</div><!-- end .slide -->


<div class="slide">
<img src="http://192.254.149.221/~mmceda/images/train_tracks.jpg" alt="map" width="926" height="219" >
<div class="slide-info">
<h5>Our Assets...</h5>
<div class="short-black-line"></div>
<h6>Your Industries</h6>
<p>Monroeville’s pro-business environment continues to attract industry sectors for which it has special assets.</p>
<p><a class="read-more" href="./finance-incentives/">Read More &raquo;</a></p>
</div><!-- end .slide-info -->
</div><!-- end .slide -->


<div class="slide">
<img src="http://192.254.149.221/~mmceda/images/welding.jpg" alt="map" width="926" height="219" >
<div class="slide-info">
<h5>Discover</h5>
<div class="short-black-line"></div>
<h6>Our Targets</h6>
<p>Monroeville’s pro-business environment continues to attract industry sectors for which it has special assets.</p>
<p><a class="read-more" href="./discover-monroeville/discover-our-industry-targets-working-title/">Read More &raquo;</a></p>
</div><!-- end .slide-info -->
</div><!-- end .slide --> 
</div>

Here is the generated code for the pager:

<div style="position: absolute; top: 0px; left: 0px; z-index: 92; visibility: hidden;" class="cycle-pager cycle-slide"><span class="cycle-pager-active">•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span><span>•</span></div>

I have also set styling for the elements in css, but they don't appear to stick.

/* pager */
.cycle-pager { 
    text-align: center; 
    width: 100%; 
    z-index: 10000; 
    position: absolute; 
    bottom: 10px; 
    overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; 
    font-size: 50px; 
    width: 20px; 
    height: 20px; 
    display: inline-block; 
    color: #797979; 
    cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #82151a;}
.cycle-pager > * { cursor: pointer;}

I would appreciate some guidance to know how to get the pagers to show up.

Solution

  • Yeah buddy, just malformed HTML by the looks of things.

    Your opening tag of:

    <div id="slider" class="cycle-slideshow 
data-cycle-fx="fade" 
data-cycle-timeout="4000"
data-cycle-slides="> div">

    Should be:

    <div id="slider" class="cycle-slideshow 
data-cycle-fx="fade" 
data-cycle-timeout="4000"
data-cycle-slides=".slide">

    Demo:http://jsfiddle.net/robschmuecker/9nY3L/