jQuery Cycle Plugin ne fonctionne pas correctement

J'utilise un plugin jQuery appelé Cycle pour faire mon diaporama et j'ai ajouté tout correctement:jQuery Cycle Plugin ne fonctionne pas correctement

<!Doctype html> 
<html> 
    <head> 
     <style> 
     *{ 
     padding:0; 
     margin:0; 
     } 
     body{ 
      font-family:Sans-serif; 
     } 
     img{ 
      max-width:100%; 
     } 
     .cycle-slideshow{ 
      width:100%; 
      display:block; 
      position:relative; 
      margin:0 auto; 
     } 
     .cycle-prev .cycle-next{ 
      font-size:200%; 
      color:#fff; 
      display:block; 
      position:absolute; 
      z-index:9999; 
      top:50%; 
      margin-top:-16px; 
      cursor:pinter; 
     } 
     .cycle-prev {left:10%;} 
     .cycle-next {right:10%;} 
     .cycle-pager{ 
      width:100%; 
      text-align:center; 
      display:block; 
      position:absolute; 
      bottom:20px; 
      z-index:9999; 
     } 
     .cycle-pager span{ 
      text-indent:100%; 
      white-space:nowrap; 
      width:12px; 
      height:12px; 
      display:block; 
      border:1px solid #fff; 
      border-radius:50%; 
      margin:0 10px; 
     } 
     .cycle-pager .cycle-pager-active{ 
      background:#fff; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="cycle-slideshow"> 
      <span class="cycle-prev">&#9001;</span> 
      <span class="cycle-next">&#9002;</span> 
      <span class="cycle-pager"></span> 
      <img src="images/1.jpg"> 
      <img src="images/2.jpg"> 
      <img src="images/3.jpg"> 
      <img src="images/4.jpg"> 
     </div> 
     <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 
     <script type="text/javascript" src="js/jquery.cycle2.min.js"></script> 
    </body> 
</html>

Mais le problème est qu'il ne fonctionne pas. Je veux dire les images cycles correctement mais le précédent et prochains boutons et pager boutons ne place pas dans la bonne zone de l'image. Voici l'écran d'impression de mon projet:

image1

Et dans ma console bar je reçois ceci:

[cycle2] --c2 init-- jquery.cycle2.min.js:6:8725 


handler.js:42:2 
[cycle2] cycle-next jquery.cycle2.min.js:6:8725

(je voulais poster un écran d'impression de ma console de navigateur, mais parce que de ma réputation, je ne pouvais pas)

Donc, fondamentalement, je ne sais pas ce qui ne va pas et je ne suis pas très professionnel avec jquery. Alors s'il vous plaît, si vous savez comment puis-je résoudre ce problème, s'il vous plaît laissez-moi savoir ... Merci

Source

2017-06-25 Anonymous

Peut-être trop tard, mais voici l'édition de votre css J'espère que cela fonctionne:

*{ 
    padding:0; 
    margin:0; 
} 
body{ 
    font-family:Sans-serif; 
} 
img{ 
    max-width:100%; 
} 
.cycle-slideshow{ 
    width:100%; 
    display:block; 
    position:relative; 
    margin:0 auto; 
} 
.cycle-prev, .cycle-next{ 
    font-size: 200%; 
    color: #FFF; 
    display: block; 
    position: absolute; 
    top: 50%; 
    margin-top: -16px; 
    z-index: 9999; 
    cursor: pointer; 
} 
.cycle-prev{left:10%;} 
.cycle-next{right:10%;} 
.cycle-pager{ 
    width:100%; 
    text-align:center; 
    display:block; 
    position:absolute; 
    bottom:20px; 
    z-index:9999; 
    cursor: pointer; 
} 
.cycle-pager span{ 
    text-indent:100%; 
    white-space:nowrap; 
    width:12px; 
    height:12px; 
    display:inline-block; 
    border:1px solid #fff; 
    border-radius:50%; 
    margin:0 10px; 
} 
.cycle-pager .cycle-pager-active { background: #FFF;}

Source

2017-07-03 09:54:47 Pouya

OMG! Finalement !!! –

jQuery Cycle Plugin ne fonctionne pas correctement

Répondre

Questions connexes