Cycle2 Pagerが表示されない

jquery cycle2スライダーを使用していますが、jquery cycle2スライダーページャーがスライダーイメージに表示されていません。デモコードを試してもスライダーの下部にポケットベルを表示したいのですが、私を助けてください。Cycle2 Pagerが表示されない

*{ 
    margin: 0; 
    padding: 0; 
} 

header{ 
    position: fixed; 
    z-index: 777; 
} 

/* Top Menu Start Here */ 

.top_nav{ 
    height: 90px; 
    width: 100%; 
    background: rgba(0,0,0,.5); 
    position: fixed; 
    z-index: 1; 
    transition:all 0.7s ease; 
    -webkit-transition:all 0.7s ease; 
    -moz-transition:all 0.7s ease; 
    -o-transition:all 0.7s ease; 
    -ms-transition:all 0.7s ease; 
} 

.container{ 
    height: 100vh; 
    width: 100%; 
    max-width: 100%; 
    background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ24kd_2tEzjbb_GdPnMQKog7lMCxtYmmy7dxjjpDr6d2ZseK-Dig"); 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    top: 0; 
} 

.site-dt{ 
    background-color: #fff; 
    height: 573px; 
    width: 100%; 
} 


#slider-main{ 
    height: 578px; 
    width: 100%; 
    overflow: hidden; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

#slider-main #slider img{ 
    height: 100%; 
    width: 100%; 
} 

.section_about{ 
    height: 573px; 
    width: 100%; 
    background-color: #de5670; 
    overflow: hidden; 
    position: absolute; 
} 

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="main.css"> 
<Script type ="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script type="text/javascript" src="http://malsup.github.io/min/jquery.cycle2.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
</head> 
<header> 
    <div class="top_nav"> 
    </div> 
</header> 
<div class="container"> 
</div> 
<div id="slider-main"> 
<div id="slider" class="cycle-slideshow" 
    data-cycle-fx=scrollHorz 
    data-cycle-timeout=2000 
    > 
    <div class="cycle-pager"> 

    </div> 
<img src="http://malsup.github.io/images/p1.jpg"> 
    <img src="http://malsup.github.io/images/p2.jpg"> 
    <img src="http://malsup.github.io/images/p3.jpg"> 
    <img src="http://malsup.github.io/images/p4.jpg"> 
</div> 
</div> 
<div class="section_about"> 

</div> 
</html>

出典

2016-10-16 Rabner Casandara

私はこのフィックスを微調整しました。 htmlはちょっと混乱していました。あなたは重すぎるCSSを追加したかもしれないと思います。うまくいけば、これは正しい方向にあなたを得るでしょう。

はまた、あなたはjqueryのは二回に役立ちます決してこれをロードしていた:)

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
header{ 
 
    position: fixed; 
 
    z-index: 777; 
 
} 
 

 
/* Top Menu Start Here */ 
 

 
.top_nav{ 
 
    height: 90px; 
 
    width: 100%; 
 
    background: rgba(0,0,0,.5); 
 
    position: fixed; 
 
    z-index: 1; 
 
    transition:all 0.7s ease; 
 
    -webkit-transition:all 0.7s ease; 
 
    -moz-transition:all 0.7s ease; 
 
    -o-transition:all 0.7s ease; 
 
    -ms-transition:all 0.7s ease; 
 
} 
 

 
.container{ 
 
    /*height: 100vh; 
 
    width: 100%; 
 
    max-width: 100%;*/ 
 
    background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ24kd_2tEzjbb_GdPnMQKog7lMCxtYmmy7dxjjpDr6d2ZseK-Dig"); 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    top: 0; 
 
} 
 
/* 
 
.site-dt{ 
 
    background-color: #fff; 
 
    height: 573px; 
 
    width: 100%; 
 
} 
 

 

 
#slider-main{ 
 
    height: 578px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
#slider-main #slider img{ 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
*/ 
 
.section_about{ 
 
    height: 573px; 
 
    /*width: 100%;*/ 
 
    background-color: #de5670; 
 
    /*overflow: hidden; 
 
    position: absolute;*/ 
 
} 
 

 
.cycle-pager { 
 
    background: white; 
 
} 
 
.cycle-pager span { 
 
    padding: 10px; 
 
    cursor: pointer; 
 
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://malsup.github.io/min/jquery.cycle2.min.js"></script> 
 
<header> 
 
    <div class="top_nav"> 
 
    </div> 
 
</header> 
 
<div class="container"> 
 

 
    <div id="slider-main"> 
 
    <div id="slider" class="cycle-slideshow" 
 
     data-cycle-fx=scrollHorz 
 
     data-cycle-timeout=2000 
 
     > 
 
     <div class="cycle-pager"> 
 

 
     </div> 
 
    <img src="http://malsup.github.io/images/p1.jpg"> 
 
     <img src="http://malsup.github.io/images/p2.jpg"> 
 
     <img src="http://malsup.github.io/images/p3.jpg"> 
 
     <img src="http://malsup.github.io/images/p4.jpg"> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="section_about"> 
 

 
    </div> 
 

 
</div>

を

出典

2016-10-17 16:21:53

Cycle2 Pagerが表示されない

答えて

関連する問題