Cycle2 Pager ne montre pas

Im utilisant jQuery cycle2 curseur, mais mon pager slider jquery cycle2 ne montre pas sur les images slider même j'ai essayé là le code de démo je veux afficher pager au bas du curseur, mais son pas s'il vous plaît vérifier mon code et aidez-moi.Cycle2 Pager ne montre pas

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

Source

2016-10-16 Rabner Casandara

J'ai peaufiné cela un peu dans un violon. Le code HTML était un peu confus et je pense que vous avez peut-être ajouté trop de CSS qui se chevauchent. J'espère que cela vous mènera dans la bonne direction.

Aussi, vous avait chargé deux fois Jquery qui aide jamais :)

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

Source

2016-10-17 16:21:53

Cycle2 Pager ne montre pas

Répondre

Questions connexes