Jquery Cycle2 cycle-pager CSS issue

Question

Similar topic and continuing on the issue of following author: Cylcle2 no cycle-pager shows up

I'm experiencing the exact same issue. Sadly beforementioned thread doesn't offer a direct solution to the issue.

I have come to the point where I have directly copied the code off of the cycle2 demo and COMPLETELY EXCLUDED ANY OTHER CODE in the attempt of debugging the problem: http://jquery.malsup.com/cycle2/demo/pager.php

<div class="cycle-slideshow" 
data-cycle-fx=scrollHorz
data-cycle-timeout=2000
>
<!-- empty element for pager links -->
<div class="cycle-pager"></div>

<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>

I have also downloaded and included the CSS code that is mentioned on the website.

Link: http://jquery.malsup.com/cycle2/demo/demo-slideshow.css

Snippet of the CSS code which refers to the pager:

 /* pager */
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; top: 10px; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}

Now, for the actual issue:

Note that I have literally copied ALL the code, included the correct javascript scripts and uploaded them to my server.

When I test; the javascript seems to be doing its job, and when I hover with the mouse over the image, the cycle.pager actually appears to be working.

However, no matter what I try, the CSS code doesn't appear to function 100%. My theory is that for some reason it doesn't grasp the .cycle-pager span and other classes and therefore doesn't show correctly - but then how is it possible that it works on the Cycle2 website?

I'm at a total loss here - and am dying to understand it. Looking forward to your reply - thank you in advance!

Answer 1

First and foremost, you need to declare the pager on the slideshow (yourPagerBox). Also, your pager needs to be outside the slideshow, because it's not supposed to be "cycled". Html example below:

<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="2000" data-cycle-pager=".yourPagerBox">
    <img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>
<!-- empty element for pager links -->
<div class="yourPagerBox"></div>