Faire un diaporama en slide automatique

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Faire un diaporama en slide automatique

Message par elsa2607 le 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:
[img][/img]

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/)


Dernière édition par elsa2607 le Mer 24 Déc 2014 - 22:30, édité 1 fois

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un diaporama en slide automatique

Message par zizou2012 le 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>
<!-- بداية اطار علوي -->
 <!-- Start Cat -->
 <div class="Cat">
 <!-- Start Cat Top -->
 <div class="CatTop">
 <div class="CatTop_Right">
 <h1> من اعمال ليالي مصرية</h1>
 </div>
 <div class="CatTop_Left">
 </div>
 </div>
 <!-- Start Cat Center -->
 <div class="CatCenter_Right">
 <div class="CatCenter_Left">
 <!-- Start Cat Body -->
 <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>
 <!-- Start Cat Bottom -->
 <div class="CatBottom">
 <div class="CatBottom_Right">
 </div>
 <div class="CatBottom_Left">
 </div>
 </div>
 </div>
<!-- / نهاية اطار سفلي -->


Dernière édition par zizou2012 le Mer 10 Déc 2014 - 16:45, édité 1 fois

zizou2012
Nouveau membre

Masculin
Messages : 16
Inscrit(e) le : 27/08/2014

http://baytdz.ahlamontada.com
zizou2012 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un diaporama en slide automatique

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

Bonsoir, Cela ne fonctionne pas.

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un diaporama en slide automatique

Message par zizou2012 le 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>
    <!-- بداية اطار علوي -->
    <!-- Start Cat -->
    <div class="Cat">
    <!-- Start Cat Top -->
    <div class="CatTop">
    <div class="CatTop_Right">
    <h1> من اعمال ليالي مصرية</h1>
    </div>
    <div class="CatTop_Left">
    </div>
    </div>
    <!-- Start Cat Center -->
    <div class="CatCenter_Right">
    <div class="CatCenter_Left">
    <!-- Start Cat Body -->
    <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>
    <!-- Start Cat Bottom -->
    <div class="CatBottom">
    <div class="CatBottom_Right">
    </div>
    <div class="CatBottom_Left">
    </div>
    </div>
    </div>
    <!-- / نهاية اطار سفلي -->

zizou2012
Nouveau membre

Masculin
Messages : 16
Inscrit(e) le : 27/08/2014

http://baytdz.ahlamontada.com
zizou2012 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un diaporama en slide automatique

Message par elsa2607 le 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.

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un diaporama en slide automatique

Message par zizou2012 le 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;
}

zizou2012
Nouveau membre

Masculin
Messages : 16
Inscrit(e) le : 27/08/2014

http://baytdz.ahlamontada.com
zizou2012 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un diaporama en slide automatique

Message par elsa2607 le 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.

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un diaporama en slide automatique

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

up Smile
c'est toujours d'actualité.

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un diaporama en slide automatique

Message par Maxwellx3 le 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

Maxwellx3
**

Féminin
Messages : 93
Inscrit(e) le : 01/08/2011

http://money-money-money.forumactif.fr/
Maxwellx3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un diaporama en slide automatique

Message par elsa2607 le 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.

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum