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를 추가했을 수도 있습니다. 바라기를 이것은 옳은 방향으로 당신을 얻을 것이다.

는 또한 도움이되지 않습니다하는 :)

*{ 
 
    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>

을 jQuery를 두 번로드했다

출처

2016-10-17 16:21:53

Cycle2 Pager가 보이지 않음

답변

관련 문제