{"id":4073,"date":"2014-02-07T00:01:02","date_gmt":"2014-02-07T05:01:02","guid":{"rendered":"http:\/\/aflama.online\/?p=4073"},"modified":"2026-02-04T22:56:51","modified_gmt":"2026-02-05T03:56:51","slug":"slideshow-loop","status":"publish","type":"post","link":"https:\/\/aflama.online\/blog\/2014\/02\/slideshow-loop\/","title":{"rendered":"Slideshow Loop"},"content":{"rendered":"\n<p>I thought that would be easy to find a snippet for an <strong>auto slideshow with loop<\/strong> &#8211; no <em>plugins<\/em> or <em>anything<\/em>, just plain code.&nbsp;Turns out that most of the code out there moves to the first position when it reaches the end &#8211; and you can actually see moving to the beginning.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Personally, I was looking for a more smooth loop, to give the impression of an &#8220;<em>infinite loop<\/em>&#8220;. So I found that the secret is to use <strong>scrollLeft<\/strong> &#8211; can you believe it?!&nbsp;Here is the code I created for this type of carousel:<\/p>\n\n\n<p class='codepen'  data-height='550' data-theme-id='0' data-slug-hash='mEckJ' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen Loop Slideshow by aflama (@aflama) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>I thought that would be easy to find a snippet for an auto slideshow with loop &#8211; no plugins or anything, just plain code.&nbsp;Turns out that most of the code out there moves to the first position when it reaches the end &#8211; and you can actually see moving to the beginning.<\/p>\n","protected":false},"author":1,"featured_media":5160,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[30],"tags":[37],"class_list":["post-4073","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","tag-javascript"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/aflama.online\/blog\/wp-content\/uploads\/2014\/02\/slider.jpeg?fit=540%2C395&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p4i5r1-13H","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/aflama.online\/blog\/wp-json\/wp\/v2\/posts\/4073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aflama.online\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aflama.online\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aflama.online\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aflama.online\/blog\/wp-json\/wp\/v2\/comments?post=4073"}],"version-history":[{"count":21,"href":"https:\/\/aflama.online\/blog\/wp-json\/wp\/v2\/posts\/4073\/revisions"}],"predecessor-version":[{"id":5115,"href":"https:\/\/aflama.online\/blog\/wp-json\/wp\/v2\/posts\/4073\/revisions\/5115"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aflama.online\/blog\/wp-json\/wp\/v2\/media\/5160"}],"wp:attachment":[{"href":"https:\/\/aflama.online\/blog\/wp-json\/wp\/v2\/media?parent=4073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aflama.online\/blog\/wp-json\/wp\/v2\/categories?post=4073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aflama.online\/blog\/wp-json\/wp\/v2\/tags?post=4073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}