{"id":1304,"date":"2019-03-29T15:40:34","date_gmt":"2019-03-29T14:40:34","guid":{"rendered":"http:\/\/lamartinieredesign.fr\/?page_id=1304"},"modified":"2023-02-17T09:06:29","modified_gmt":"2023-02-17T08:06:29","slug":"scroll-horizontal","status":"publish","type":"page","link":"https:\/\/lamartinieredesign.fr\/?page_id=1304","title":{"rendered":"Scroll horizontal"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"899\" height=\"498\" src=\"http:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2019\/03\/scrollH.png\" alt=\"\" class=\"wp-image-1306\" srcset=\"https:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2019\/03\/scrollH.png 899w, https:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2019\/03\/scrollH-300x166.png 300w, https:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2019\/03\/scrollH-768x425.png 768w, https:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2019\/03\/scrollH-672x372.png 672w\" sizes=\"(max-width: 899px) 100vw, 899px\" \/><\/figure>\n\n\n\n<p>Le code HTML. Il faut un conteneur pour des images ou d&rsquo;autres conteneurs de niveau inf\u00e9rieur (par ex des div ou articles ou autres)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\"&gt;\n   &lt;img src=\"images\/genie01.jpg\" alt=\"\u00e0 compl\u00e9ter\"&gt;\n   &lt;img src=\"images\/genie02.jpg\" alt=\"\u00e0 compl\u00e9ter\"&gt;\n   &lt;img src=\"images\/genie03.jpg\" alt=\"\u00e0 compl\u00e9ter\"&gt;\n   &lt;img src=\"images\/genie04.jpg\" alt=\"\u00e0 compl\u00e9ter\"&gt;\n   &lt;img src=\"images\/genie05.jpg\" alt=\"\u00e0 compl\u00e9ter\"&gt;\n   &lt;img src=\"images\/genie06.jpg\" alt=\"\u00e0 compl\u00e9ter\"&gt;\n   &lt;img src=\"images\/genie07.jpg\" alt=\"\u00e0 compl\u00e9ter\"&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>La mise en forme du conteneur se fait dans les CSS en le d\u00e9clarant flexible  et en autorisant le d\u00e9bordement horizontal :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n   display: flex;\n   overflow-x: auto;\n}<\/code><\/pre>\n\n\n\n<p>Le flex place les images \u00e0 l&rsquo;horizontale (axe principal par d\u00e9faut) mais il les r\u00e9duit pour forcer \u00e0 toutes les faire rentrer dans la largeur du viewport. Il faut donc donner une dimension minimum aux images afin qu&rsquo;elles ne se r\u00e9duisent pas (ici la valeur 400px est indicative et vous devez l&rsquo;adapter \u00e0 votre contenu). La marge sert \u00e0 \u00e9carter les images si besoin. Le vertical-align supprime la petite bande ind\u00e9sirable sous les images (Voir )<br><\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container img {\n   margin-right: 15px;\n   min-width: 400px;\n   vertical-align: bottom;\n}<\/code><\/pre>\n\n\n\n<p>Il ne vous reste plus qu&rsquo;\u00e0 changer le HTML pour utiliser vos propres images et \u00e0 tester.<\/p>\n\n\n\n<p>Une bonne ressource sur internet permet de compl\u00e9ter cette explication, en ajoutant un magn\u00e9tisme sur chaque image au moment du d\u00e9placement et en proposant une autre fa\u00e7on de r\u00e9gler la largeur des images, enti\u00e8rement en flex :<br><a href=\"https:\/\/vincentdubroeucq.com\/slider-carrousel-sans-js-css-scoll-snap\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/vincentdubroeucq.com\/slider-carrousel-sans-js-css-scoll-snap\/<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le code HTML. Il faut un conteneur pour des images ou d&rsquo;autres conteneurs de niveau inf\u00e9rieur (par ex des div ou articles ou autres) La mise en forme du conteneur se fait dans les CSS en le d\u00e9clarant flexible et en autorisant le d\u00e9bordement horizontal : Le flex place les images \u00e0 l&rsquo;horizontale (axe principal &hellip; <a href=\"https:\/\/lamartinieredesign.fr\/?page_id=1304\" class=\"more-link\">Continuer la lecture de <span class=\"screen-reader-text\">Scroll horizontal<\/span>  <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":931,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/1304"}],"collection":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1304"}],"version-history":[{"count":5,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/1304\/revisions"}],"predecessor-version":[{"id":4580,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/1304\/revisions\/4580"}],"up":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/931"}],"wp:attachment":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}