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
avatar

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.
avatar

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.
avatar

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.
avatar

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é.
avatar

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

avatar

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.
avatar

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