Faire un diaporama en slide automatique

par elsa2607 Mar 9 Déc 2014 - 19:07

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : /
Lien du forum : http://graphisyabeta.graphforum.com/

Description du problème

Bonsoir,
Voila ça fait un moment que je cherche comment faire une sorte de diaporama en slide comme sur le schéma. Je suppose que cela a un nom (qui aurait peut-être put faire aboutir ma recherche). Enfin bref je cherche à faire un diapo (avec défilement automatique) + des petits points (comme sur le schéma) qui permettrait de changer l'image manuellement. Quelqu'un pourrait-il m'éclairer sur la façon de le réaliser ? Mercii Smile

(lien vers le forum d'où provient l'image http://prismver-rpg.forumgratuit.org/)

par zizou2012 Mar 9 Déc 2014 - 19:23

voici un code html en 3d vous allez seulement changer les liens images

Code:: <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /> </head> <head> <meta charset="utf-8"> <base target="_parent" /> <title>Bounce slider by weblanca.com</title> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://www.data-true.com/vb/wb_bounce_slider/jquery.infinitecarousel3.min.js"></script> <script type="text/javascript" src="http://www.data-true.com/vb/wb_bounce_slider/easing.js"></script> <script type="text/javascript"> $(function(){ $(".carousel").infiniteCarousel({ imagePath: "http://www.data-true.com/vb/wb_bounce_slider/images/", transitionSpeed:600, displayTime: 4000, internalThumbnails: false, thumbnailType: "count", customClass: "myCarousel", progressRingColorOpacity: "0,0,0,.9", progressRingBackgroundOn: false, margin: 2, easeLeft: "easeOutBounce", easeRight:"easeOutBounce", inView: 4, advance: 2, autoPilot: true, prevNextInternal: false, autoHideCaptions: false }); $(".carousel2").infiniteCarousel({ imagePath: "http://www.data-true.com/vb/wb_bounce_slider/images/", transitionSpeed:600, displayTime: 4000, internalThumbnails: false, thumbnailType: "count", customClass: "myCarousel", progressRingColorOpacity: "0,0,0,.9", progressRingBackgroundOn: false, margin: 2, easeLeft: "easeOutBounce", easeRight:"easeOutBounce", inView: 4, advance: 2, autoPilot: true, prevNextInternal: false, autoHideCaptions: false }); $(".carousel3").infiniteCarousel({ imagePath: "http://www.data-true.com/vb/wb_bounce_slider/images/", transitionSpeed:600, displayTime: 4000, internalThumbnails: false, thumbnailType: "count", customClass: "myCarousel", progressRingColorOpacity: "0,0,0,.9", progressRingBackgroundOn: false, margin: 2, easeLeft: "easeOutBounce", easeRight:"easeOutBounce", inView: 4, advance: 2, autoPilot: true, prevNextInternal: false, autoHideCaptions: false }); }); </script> <style type="text/css"> body{ padding: 0; margin: 0; } .ic_thumbnails { display:none } div.ic_myCarousel { clear:right; } div.wbBorderRad{ width: 880px; background: #f7f7f7; border: 1px solid #e4e4e4; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } div.bar{ margin: 5px 0; border: 0; width: 880px; } div.baritem{ display: block; padding: 7px; font-size: 10pt; color: #ffffff; font-family: tahoma; text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); background: url('wb_bounce_slider/button_bg.png'); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-decoration: none; } div.baritem a:hover{ margin-top: 7px; background: #fab650; } </style>   <div class="Cat">  <div class="CatTop"> <div class="CatTop_Right"> <h1> من اعمال ليالي مصرية</h1> </div> <div class="CatTop_Left"> </div> </div>  <div class="CatCenter_Right"> <div class="CatCenter_Left">  <div class="CatBody"> <div align="center"> <div class="wbBorderRad bar"> <div class="baritem">اعمال فريق الترجمة</div> </div><div dir="ltr" class="wbBorderRad"><ul class="carousel"> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=15563_a-1576-a-1606-a-1585-1.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=15429_a-1575-a-1604-a-1576-a-1606-a-1585-.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im70.gulfup.com/vqzYNU.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im52.gulfup.com/Cju9VG.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im52.gulfup.com/Cju9VG.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=15578_a-1576-a-1606-a-1585-2.png" height="100" width="200" /></a></li></ul></div> <div class="wbBorderRad bar"> <div class="baritem">الأعمال الحصرية</div> </div><div dir="ltr" class="wbBorderRad"><ul class="carousel2"> <li><a href="http://www.layalyeg.com/"> <img src="http://im68.gulfup.com/lLcEVI.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im64.gulfup.com/mkJsCc.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16870_10.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im50.gulfup.com/5u8qW6.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16868_8.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16832_3.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=13424_a-1575-a-1604-a-1576-a-1606-a-1585-.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im57.gulfup.com/uLQD2P.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im68.gulfup.com/skUNO6.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=15580_a-1576-a-1606-a-1585-3.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=15324_01201.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=12797_a-1575-a-1604-a-1576-a-1606-a-1585-data-tru111e.png" height="100" width="200" /></a></li></ul></div> <div class="wbBorderRad bar"> <div class="baritem">حصريات الأعضاء</div> </div><div dir="ltr" class="wbBorderRad"><ul class="carousel3"> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16813_3.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im53.gulfup.com/LSQewQ.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16853_data-true.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16814_4.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im73.gulfup.com/WPUnPJ.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16831_2.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16811_1.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16810_3.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im51.gulfup.com/gSYLiC.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16809_2.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16812_2.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16573_0222.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16801_i2gb1n.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16575_0044.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16808_1.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im73.gulfup.com/WpWXVW.png" height="100" width="200" /></a></li></ul></div> </div>  </div> </div> </div>  <div class="CatBottom"> <div class="CatBottom_Right"> </div> <div class="CatBottom_Left"> </div> </div> </div>

par elsa2607 Mar 9 Déc 2014 - 19:31

Bonsoir, Cela ne fonctionne pas.

par zizou2012 Mer 10 Déc 2014 - 16:50

essaye celui la

Code:: <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /> </head> <head> <meta charset="utf-8"> <base target="_parent" /> <title>Bounce slider by weblanca.com</title> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://www.data-true.com/vb/wb_bounce_slider/jquery.infinitecarousel3.min.js"></script> <script type="text/javascript" src="http://www.data-true.com/vb/wb_bounce_slider/easing.js"></script> <script type="text/javascript"> $(function(){ $(".carousel").infiniteCarousel({ imagePath: "http://www.data-true.com/vb/wb_bounce_slider/images/", transitionSpeed:600, displayTime: 4000, internalThumbnails: false, thumbnailType: "count", customClass: "myCarousel", progressRingColorOpacity: "0,0,0,.9", progressRingBackgroundOn: false, margin: 2, easeLeft: "easeOutBounce", easeRight:"easeOutBounce", inView: 4, advance: 2, autoPilot: true, prevNextInternal: false, autoHideCaptions: false }); $(".carousel2").infiniteCarousel({ imagePath: "http://www.data-true.com/vb/wb_bounce_slider/images/", transitionSpeed:600, displayTime: 4000, internalThumbnails: false, thumbnailType: "count", customClass: "myCarousel", progressRingColorOpacity: "0,0,0,.9", progressRingBackgroundOn: false, margin: 2, easeLeft: "easeOutBounce", easeRight:"easeOutBounce", inView: 4, advance: 2, autoPilot: true, prevNextInternal: false, autoHideCaptions: false }); $(".carousel3").infiniteCarousel({ imagePath: "http://www.data-true.com/vb/wb_bounce_slider/images/", transitionSpeed:600, displayTime: 4000, internalThumbnails: false, thumbnailType: "count", customClass: "myCarousel", progressRingColorOpacity: "0,0,0,.9", progressRingBackgroundOn: false, margin: 2, easeLeft: "easeOutBounce", easeRight:"easeOutBounce", inView: 4, advance: 2, autoPilot: true, prevNextInternal: false, autoHideCaptions: false }); }); </script> <style type="text/css"> body{ padding: 0; margin: 0; } .ic_thumbnails { display:none } div.ic_myCarousel { clear:right; } div.wbBorderRad{ width: 880px; background: #f7f7f7; border: 1px solid #e4e4e4; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } div.bar{ margin: 5px 0; border: 0; width: 880px; } div.baritem{ display: block; padding: 7px; font-size: 10pt; color: #ffffff; font-family: tahoma; text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); background: url('wb_bounce_slider/button_bg.png'); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-decoration: none; } div.baritem a:hover{ margin-top: 7px; background: #fab650; } </style>   <div class="Cat">  <div class="CatTop"> <div class="CatTop_Right"> <h1> من اعمال ليالي مصرية</h1> </div> <div class="CatTop_Left"> </div> </div>  <div class="CatCenter_Right"> <div class="CatCenter_Left">  <div class="CatBody"> <div align="center"> <div class="wbBorderRad bar"> <div class="baritem">اعمال فريق الترجمة</div> </div><div dir="ltr" class="wbBorderRad"><ul class="carousel"> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=15563_a-1576-a-1606-a-1585-1.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=15429_a-1575-a-1604-a-1576-a-1606-a-1585-.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im70.gulfup.com/vqzYNU.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im52.gulfup.com/Cju9VG.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im52.gulfup.com/Cju9VG.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=15578_a-1576-a-1606-a-1585-2.png" height="100" width="200" /></a></li></ul></div> <div class="wbBorderRad bar"> <div class="baritem">الأعمال الحصرية</div> </div><div dir="ltr" class="wbBorderRad"><ul class="carousel2"> <li><a href="http://www.layalyeg.com/"> <img src="http://im68.gulfup.com/lLcEVI.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im64.gulfup.com/mkJsCc.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16870_10.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im50.gulfup.com/5u8qW6.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16868_8.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16832_3.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=13424_a-1575-a-1604-a-1576-a-1606-a-1585-.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im57.gulfup.com/uLQD2P.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im68.gulfup.com/skUNO6.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=15580_a-1576-a-1606-a-1585-3.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=15324_01201.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=12797_a-1575-a-1604-a-1576-a-1606-a-1585-data-tru111e.png" height="100" width="200" /></a></li></ul></div> <div class="wbBorderRad bar"> <div class="baritem">حصريات الأعضاء</div> </div><div dir="ltr" class="wbBorderRad"><ul class="carousel3"> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16813_3.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im53.gulfup.com/LSQewQ.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16853_data-true.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16814_4.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im73.gulfup.com/WPUnPJ.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16831_2.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16811_1.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16810_3.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im51.gulfup.com/gSYLiC.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16809_2.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16812_2.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16573_0222.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16801_i2gb1n.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16575_0044.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://ar-medifire.com/out.php?i=16808_1.png" height="100" width="200" /></a></li> <li><a href="http://www.layalyeg.com/"> <img src="http://im73.gulfup.com/WpWXVW.png" height="100" width="200" /></a></li></ul></div> </div>  </div> </div> </div>  <div class="CatBottom"> <div class="CatBottom_Right"> </div> <div class="CatBottom_Left"> </div> </div> </div>

par elsa2607 Mer 10 Déc 2014 - 23:23

Bonsoir,
Ce n'est malheureusement pas adapté à un PA.
C'est effectivement un carrousel qu'il me faut mais les flèches sur les cotés ne rendent pas mon projet réalisable, je voudrais comme sur le schéma des boutons sur l'image.

par zizou2012 Jeu 11 Déc 2014 - 17:35

essaye ce code

HTML

Code:: <div id="caroussel"> <div class="carousselConteneur"> <ul> <li class="slide"> <img src="http://dribbble.s3.amazonaws.com/users/178514/screenshots/652645/lmf2.png" alt="Si je suis pertinent ne m'oubliez pas" /> </li> <li class="slide"> <img src="http://dribbble.s3.amazonaws.com/users/178514/screenshots/652638/lmf1.png" alt="Si je suis pertinent ne m'oubliez pas" /> </li> <li class="slide"> <img src="http://dribbble.s3.amazonaws.com/users/178514/screenshots/652625/erp_1.png" alt="Si je ne suis pas pertinent, laissez moi vide" /> </li> </ul> </div> </div> <p class="credits">Les images proviennent du compte Dribbble du designer <a href="http://dribbble.com/LIBERTY">Paul Connop</a> et le code de votre serviteur <a href="http://www.web-actually.fr">Web Actually</a>.</p>

JAVASCRIPT

Code:: $(document).ready(function(){ var cPosition = 0; //Position courante var slideWidth = 400; //Largeur d'un slide var slides = $('.slide'); //Identification des slides var numSlides = slides.length; //Nombre de slide //Js activé je passe donc le conteneur en overflow hidden pour cacher les autres slides $('#caroussel').css('overflow','hidden'); //Float left sur les LI slides.css({'float' : 'left', 'width' : slideWidth}); $('.carousselConteneur ul').css('width', slideWidth * numSlides); $('#caroussel') .prepend('<a href="#" class="controles" id="ctrlGauche">Slide précédent</a>') .append('<a href="#" class="controles" id="ctrlDroite">Slide suivant</a>'); manageControls(cPosition); $('.controles').bind('click', function(){ cPosition = ($(this).attr('id')=='ctrlDroite')? cPosition+1 : cPosition-1; manageControls(cPosition); $('.carousselConteneur').animate({'marginLeft' : slideWidth*(-cPosition)}); }); function manageControls(position){ if(position==0){ $('#ctrlGauche').hide() } else{ $('#ctrlGauche').show() } if(position==numSlides-1){ $('#ctrlDroite').hide() } else{ $('#ctrlDroite').show() } } });

CSS

Code:: #caroussel { height:300px; margin:0 auto; overflow: auto; position: relative; width:400px; } .carousselConteneur ul { list-style:none !important; margin:0 !important; padding-left:0 !important; } .carousselConteneur li.slide { height:300px; margin:0 auto; width:400px; } .slide a { margin:0 !important; padding: 0 !important; } .controles { background:rgba(0,0,0,.45); cursor:pointer; display:block; height:40px; overflow: hidden; position: absolute; text-indent:100%; top: 110px; width:40px; white-space: nowrap; } .controles:hover, .controles:focus { background: rgba(0,0,0,.75); } #ctrlGauche { /*background:transparent url("fleche-gauche.png") no-repeat 0 0; mettre une image*/ left:0; z-index:99; } #ctrlDroite { /*background:transparent url("fleche-droite.png") no-repeat 0 0; mettre une image*/ right:0; z-index:99; } /* Pour la démo seulement */ .credits { border-top: 1px solid #ededed; color: #696969; font-size: .875em; font-family: "Helevtica Neue", Helvetica, Arial, sans-serif; padding: 15px 0; } .credits a, .credits a:visited { color: #4c5757; } .credits a:hover, .credits a:focus { color: #3c4545; text-decoration:none; }

par elsa2607 Mar 16 Déc 2014 - 18:05

Coucou désolée mais je cherche quelque chose de précis sans quoi cela ne rentrera pas dans la case du tableau de mon PA.

par elsa2607 Jeu 18 Déc 2014 - 22:46

up

c'est toujours d'actualité.

par Maxwellx3 Ven 19 Déc 2014 - 1:13

As-tu essayé Nivo Slider ? Peut-être que c'est ce que tu cherches.

http://dev7studios.com/products/nivo-slider-wordpress-plugin#usage
http://docs.dev7studios.com/jquery-plugins/nivo-slider

par elsa2607 Dim 21 Déc 2014 - 0:47

C'est en gros ce que je cherche malheureusement c'est en anglais ce qui ne m'aide pas vraiment, de plus ils sont payants.

Faire un diaporama en slide automatique