CODEWITHSUNDEEP
jquerycsspager
Richard
Richard

Reputation: 11

jQuery cycle2 pager not working

I've tried everything conceivable to get the cycle2 pager working but nothing I've tried has made any difference. I've copied and pasted the example from the demo page and I include the code here - it is very small. The cycle.css file is an exact copy of the CSS file from the demo with no modifications.

What's the symptom? The pager comes out as very tiny black bullets positioned on the left hand side of the page. What was I expecting? Larger coloured bullets centrally positioned as in the demo.

I've searched high and low for other posts but have not found an answer. Can anyone help please. If you want to see what I see then here's the url: http://school4kids.org/test-cycle2.asp

Code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!-- Stylesheets -->
<link rel=stylesheet href="http://fonts.googleapis.com/css?family=Acme">
<link rel=stylesheet href="http://www.malsup.com/jquery/cycle2/site.css">
<link rel=stylesheet href="http://www.malsup.com/jquery/cycle2/demo/demo-slideshow.css">

<!-- Javascripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>


</head>

<body>


<br><br>

<div class="example-pager"></div>
<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz
    data-cycle-timeout=2000
    data-cycle-pager=".example-pager"
    >
    <!-- 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>
<div class="example-pager"></div>

<br><br>


</body>

</html>

ADDITION INFORMATION After more exploring, I realised there was something in the site.css that was doing some of the magic and that without that file things didn't work. I stripped it down to the minimum (I didn't want it all as it message up my own styling) and found that the parts that were needed to get the bullets in the right place. Combining this with the previous solution and then everything works. I now don't include any of the styling files from the demo and have created my own css file which just includes the following:

.cycle-pager { display: block; }

.example-pager { text-align: center; width: 100%; z-index: 500; top: 10px; overflow: hidden; font-family:  Arial; font-size: 14px; line-height: 18px; color: #333; }
.example-pager span { font-size: 50px; width: 16px; height: 16px; display: inline-block; color: #ddd; }
.example-pager span.cycle-pager-active { color: #D69746;}
.exmaple-pager > * { cursor: pointer;}

Upvotes: 1

Views: 3222

Answers (2)

Matt
Matt

Reputation: 278

Nikhil's answer didn't work for me, but it got me digging more into the CSS and try more things.

My problem was the pager simply did not show up -> it was like it was hidden beneath the images.

Finally i set overflow: hidden to overflow: visible and it worked as advertised.

Upvotes: 1

Nikhil N
Nikhil N

Reputation: 4577

Use following css (put in head tag in your html). It will work as expected.

Demo

CSS:

.external { position: static }
.external > * { margin: 0 5px }
.cycle-pager { display: block; }

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

Upvotes: 0

Related Questions