Cylcle2 no cycle-pager shows up

问题

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

    }
})();

回答1:

This problem causes doctype Use <!doctype html>

回答2:

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>

回答3:

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>

回答4:

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

来源：https://stackoverflow.com/questions/17294191/cylcle2-no-cycle-pager-shows-up

标签

javascript

html

css

twitter-bootstrap

jquery-cycle2