Partage
  • Partager sur Facebook
  • Partager sur Twitter

defilement d'images pour debutant

comment faire defiler des images

Sujet résolu
    14 avril 2018 à 15:33:42

    Bonjours a tous 

    j'aimerai savoir comment faire defiler des images a la suite ?

    merci d'avance.

    • Partager sur Facebook
    • Partager sur Twitter
      Staff 14 avril 2018 à 15:47:46

      Bonjour,

      recherche "carrousel" ou "slider" sur le net, tu auras des dizaines de propositions.

      Évite cependant les sites qui veulent te faire installer un logiciel local (genre Wowslider), ce n'est pas fiable.

      • Partager sur Facebook
      • Partager sur Twitter
      Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
        14 avril 2018 à 16:50:56

        Dacord merci beaucoup je vais essayer
        • Partager sur Facebook
        • Partager sur Twitter
          15 avril 2018 à 12:07:48

          Bootstrap propose des carrousel tout fait :-)

          + d'infos : https://openclassrooms.com/courses/prenez-en-main-bootstrap/les-plugins-jquery-2#/id/r-2730064

          -
          Edité par Laurent Cipicchia 15 avril 2018 à 12:08:04

          • Partager sur Facebook
          • Partager sur Twitter
          Donne moi ton avis sur ma Reconversion professionnel en Développeur Web ----- Rejoins moi sur LinkedIn
            15 avril 2018 à 12:29:19

            Bonjour,

            Un exemple basique en pur CSS:

            http://jsbin.com/tovofe/5/edit?html,css,output

            <div class="contener_slideshow">
            
            <div class="contener_slide">
            
            <div class="slid_1"><img src="http://lorempicsum.com/nemo/950/600/1"></div>
            <div class="slid_2"><img src="http://lorempicsum.com/futurama/950/600/2"></div>
            <div class="slid_3"><img src="http://lorempicsum.com/futurama/950/600/3"></div>
            
            </div>
            
            </div>

            CSS

            .contener_slideshow {
            	width:950px;
            	height:600px;
            	overflow:hidden;
            	position:relative;
              border:12px ridge gold;
            }
            .slid_1,.slid_2,.slid_3 {
            	display:table-cell;
            	width:950px;
            	height:600px;
            }
            
            .contener_slide {
            	width:950px;
            	height:600px;
            	position:absolute;
              display:table;
              animation:anim_slide 9s infinite alternate;
            }
            @keyframes anim_slide {
            	0% {
            		left:0px;
            	}
            	15% {
            		left:0px;
            	}
            	35% {
            		left:-950px;
            	}
            	65% {
            		left:-950px;
            	}
            	85% {
            		left:-1900px;
            	}
            	100% {
            		left: -1900px;
            	}
            }




            • Partager sur Facebook
            • Partager sur Twitter
            "La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)

            defilement d'images pour debutant

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown