{"id":3421,"date":"2021-11-04T06:29:04","date_gmt":"2021-11-04T06:29:04","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3421"},"modified":"2023-06-12T14:42:50","modified_gmt":"2023-06-12T14:42:50","slug":"js-tutorial-infinite-carousel-with-pure-css-and-js","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/js-tutorial-infinite-carousel-with-pure-css-and-js\/","title":{"rendered":"JS Tutorial &#8211; Infinite carousel With Pure CSS and JS"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; Try playing with the parameters on the gui to the right. The Infinite carousel is just one effect of WebGL.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"Untitled\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/qBYEdGe?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/qBYEdGe\"><br \/>\nUntitled<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">const text1_options = [\r\n  \"Why art is so important\",\r\n  \"Why you shouldn't buy the new iPhone\",\r\n  \"Is life actually real?\",\r\n  \"How to learn JS in 2 months\"\r\n];\r\nconst text2_options = [\r\n  \"69 min. read\",\r\n  \"7 min. read\",\r\n  \"8 min. read\",\r\n  \"87,658.1277 min. read\"\r\n];\r\nconst color_options = [\"#EBB9D2\", \"#FE9968\", \"#7FE0EB\", \"#6CE5B1\"];\r\nconst image_options = [\r\n  \"https:\/\/images.unsplash.com\/photo-1524721696987-b9527df9e512?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1190&amp;q=80\",\r\n  \"https:\/\/images.unsplash.com\/photo-1556656793-08538906a9f8?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80\",\r\n  \"https:\/\/images.unsplash.com\/photo-1506073828772-2f85239b6d2d?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1189&amp;q=80\",\r\n  \"https:\/\/images.unsplash.com\/photo-1523800503107-5bc3ba2a6f81?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=80\"\r\n];\r\nvar i = 0;\r\nconst currentOptionText1 = document.getElementById(\"current-option-text1\");\r\nconst currentOptionText2 = document.getElementById(\"current-option-text2\");\r\nconst currentOptionImage = document.getElementById(\"image\");\r\nconst carousel = document.getElementById(\"carousel-wrapper\");\r\nconst mainMenu = document.getElementById(\"menu\");\r\nconst optionPrevious = document.getElementById(\"previous-option\");\r\nconst optionNext = document.getElementById(\"next-option\");\r\n\r\ncurrentOptionText1.innerText = text1_options[i];\r\ncurrentOptionText2.innerText = text2_options[i];\r\ncurrentOptionImage.style.backgroundImage = \"url(\" + image_options[i] + \")\";\r\nmainMenu.style.background = color_options[i];\r\n\r\noptionNext.onclick = function () {\r\n  i = i + 1;\r\n  i = i % text1_options.length;\r\n  currentOptionText1.dataset.nextText = text1_options[i];\r\n\r\n  currentOptionText2.dataset.nextText = text2_options[i];\r\n\r\n  mainMenu.style.background = color_options[i];\r\n  carousel.classList.add(\"anim-next\");\r\n  \r\n  setTimeout(() =&gt; {\r\n    currentOptionImage.style.backgroundImage = \"url(\" + image_options[i] + \")\";\r\n  }, 455);\r\n  \r\n  setTimeout(() =&gt; {\r\n    currentOptionText1.innerText = text1_options[i];\r\n    currentOptionText2.innerText = text2_options[i];\r\n    carousel.classList.remove(\"anim-next\");\r\n  }, 650);\r\n};\r\n\r\noptionPrevious.onclick = function () {\r\n  if (i === 0) {\r\n    i = text1_options.length;\r\n  }\r\n  i = i - 1;\r\n  currentOptionText1.dataset.previousText = text1_options[i];\r\n\r\n  currentOptionText2.dataset.previousText = text2_options[i];\r\n\r\n  mainMenu.style.background = color_options[i];\r\n  carousel.classList.add(\"anim-previous\");\r\n\r\n  setTimeout(() =&gt; {\r\n    currentOptionImage.style.backgroundImage = \"url(\" + image_options[i] + \")\";\r\n  }, 455);\r\n  \r\n  setTimeout(() =&gt; {\r\n    currentOptionText1.innerText = text1_options[i];\r\n    currentOptionText2.innerText = text2_options[i];\r\n    carousel.classList.remove(\"anim-previous\");\r\n  }, 650);\r\n};\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Try playing with the parameters on the gui to <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/js-tutorial-infinite-carousel-with-pure-css-and-js\/\" title=\"JS Tutorial &#8211; Infinite carousel With Pure CSS and JS\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3555,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,20,2,12],"tags":[325,336,264,263,103,227,265],"newstopic":[573,571],"class_list":{"0":"post-3421","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-javascript","9":"category-web-design","10":"category-web-development","11":"tag-background-effects","12":"tag-infinite-carousel","13":"tag-javascript-tutorial","14":"tag-js-tutorial","15":"tag-web-design","16":"tag-web-designer","17":"tag-webgl","18":"newstopic-css","19":"newstopic-javascript"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3421"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3421\/revisions"}],"predecessor-version":[{"id":3423,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3421\/revisions\/3423"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3555"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3421"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}