Cylcle2 no cycle-pager shows up

Question

I'm trying to make a slideshow for a website where the pictures slides automaticly (which works), and there should be round buttons to click below it. But the buttons doesn't show up, even thou I have follow the instructions from http://jquery.malsup.com/cycle2/demo/pager.php

my HTML:

<div class ="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="5000" data-cycle-pager=".cycle-pager">

        <img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
        <img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
        <img src="http://jquery.malsup.com/cycle2/images/beach9.jpg">
    </div>
    <div class="cycle-pager"></div>

My CSS:

    .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: #999999; 
    cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}

.cycle-pager{
    width: 500px;
    height: 30px;
    margin-top: 517px;
}

and my JavaScript:

(function(){
    window.onload = function(){ //main
        $.getScript("/js/cycle2.js", null); //Handles the slideshow
        $.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);

    }
})();

Works fine here : http://jsfiddle.net/WTzH5/ Are you using `demo-slideshow.css` ? — Nick R, Jun 25 '13 at 09:59
Yes I have. The weird thing is when I look at the code on the examples, there are span tags in the cycle-pager div, but hey won't show up in mine. — Tobbbe, Jun 25 '13 at 11:50
There's something wrong with your CSS, you have `top: 10px;*`, use the example CSS, and then change the position. — Nick R, Jun 25 '13 at 12:05
Alright now I have copy pasted the whole css from the demo and it still doesn't show up :S It got to be something else — Tobbbe, Jun 25 '13 at 12:21
I would comment out your own CSS, and add it back in, bit by bit, until you find where the problem is coming from, that's the only way to debug it really - as if the slider is actually sliding, then it's not a Javascript issue. — Nick R, Jun 25 '13 at 12:23
I solved it with another slideshow, but big thanks for your time! :) — Tobbbe, Jun 25 '13 at 14:30

score 1 · Answer 1 · answered Oct 07 '13 at 14:00

1

This problem causes doctype Use <!doctype html>

answered Oct 07 '13 at 14:00

David Horehleď

11
1

score 0 · Answer 2 · answered Jun 25 '13 at 09:59

try this javascript

<Script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<Script type="text/javascript" src="jquery.cycle2.min.js"></script>
<script type="text/javascript">
(function(){
    window.onload = function(){ //main
        $.getScript("/js/cycle2.js", null); //Handles the slideshow
        $.getScript("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js", null);

    }
})();
</script>

score 0 · Answer 3 · answered Jun 25 '13 at 12:01

Try this:

JSFiddle Demo

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script src="http://malsup.github.io/jquery.cycle2.js"></script>

    <link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">

</head>
<body>
    <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>

</body>
</html>

score 0 · Answer 4 · answered Sep 27 '13 at 18:05

0

Try adding "height:40px;" to the .cycle-pager class.

answered Sep 27 '13 at 18:05

Eduardo Mayer

359
1
3
10

Cylcle2 no cycle-pager shows up

4 Answers4

Linked