{"id":3483,"date":"2022-09-03T13:05:28","date_gmt":"2022-09-03T13:05:28","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3483"},"modified":"2023-06-10T11:35:11","modified_gmt":"2023-06-10T11:35:11","slug":"js-tutorial-draggable-infinite-slideshow-with-tweenmax-js-draggable-js","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/js-tutorial-draggable-infinite-slideshow-with-tweenmax-js-draggable-js\/","title":{"rendered":"JS Tutorial &#8211; Draggable Infinite Slideshow with tweenmax.js &#038; draggable.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; Draggable infinite slideshow with TweenMax parallax effects.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"Draggable Infinite Slideshow with tweenmax.js &amp; draggable.js\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/KKRewYV?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\/KKRewYV\"><br \/>\nDraggable Infinite Slideshow with tweenmax.js &amp; draggable.js<\/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\">var slideshow_container = document.getElementById(\"slideshow-container\"),\r\n  slides_container = document.getElementById(\"slides-container\"),\r\n  previous_arrow = document.getElementById(\"previous-arrow\"),\r\n  next_arrow = document.getElementById(\"next-arrow\");\r\n\r\n$(document).ready(function () {\r\n  slideshow_container.classList.add(\"animation-reveal\");\r\n  $(\".text\").css(\"opacity\", \"0\");\r\n  $(\".image\").css(\"opacity\", \"0\");\r\n  $(\".image1\").css(\"opacity\", \"0\");\r\n  $(\".image2\").css(\"opacity\", \"0\");\r\n  $(\".previous-arrow\").css(\"opacity\", \"0\");\r\n  $(\".next-arrow\").css(\"opacity\", \"0\");\r\n  $(\".slideshow-container\").css(\"visibility\", \"visible\");\r\n  setTimeout(() =&gt; {\r\n    slideshow_container.classList.remove(\"animation-reveal\");\r\n    $(\".text\").css(\"opacity\", \"1\");\r\n    $(\".image\").css(\"opacity\", \"1\");\r\n    $(\".image1\").css(\"opacity\", \"1\");\r\n    $(\".image2\").css(\"opacity\", \"1\");\r\n    $(\".previous-arrow\").css(\"opacity\", \"0.8\");\r\n    $(\".next-arrow\").css(\"opacity\", \"0.8\");\r\n  }, 1000);\r\n});\r\n\r\nconst bg_color_options = [\"#88D3CE\", \"#FF85A1\", \"#88D3CE\", \"#FF85A1\"];\r\n\/\/const text_color_options = [\"#000\", \"#fff\", \"#000\", \"#fff\"];\r\nconst arrow_color_options = [\r\n  \"data:image\/svg+xml,%3Csvg version='1.1' xmlns='http:\/\/www.w3.org\/2000\/svg' xmlns:xlink='http:\/\/www.w3.org\/1999\/xlink' x='0px' y='0px' viewBox='0 0 256 256'%3E%3Cpolygon points='225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093' fill='%23000'%3E%3C\/polygon%3E%3C\/svg%3E\",\r\n  \"data:image\/svg+xml,%3Csvg version='1.1' xmlns='http:\/\/www.w3.org\/2000\/svg' xmlns:xlink='http:\/\/www.w3.org\/1999\/xlink' x='0px' y='0px' viewBox='0 0 256 256'%3E%3Cpolygon points='225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093' fill='%23fff'%3E%3C\/polygon%3E%3C\/svg%3E\",\r\n  \"data:image\/svg+xml,%3Csvg version='1.1' xmlns='http:\/\/www.w3.org\/2000\/svg' xmlns:xlink='http:\/\/www.w3.org\/1999\/xlink' x='0px' y='0px' viewBox='0 0 256 256'%3E%3Cpolygon points='225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093' fill='%23000'%3E%3C\/polygon%3E%3C\/svg%3E\",\r\n  \"data:image\/svg+xml,%3Csvg version='1.1' xmlns='http:\/\/www.w3.org\/2000\/svg' xmlns:xlink='http:\/\/www.w3.org\/1999\/xlink' x='0px' y='0px' viewBox='0 0 256 256'%3E%3Cpolygon points='225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093' fill='%23fff'%3E%3C\/polygon%3E%3C\/svg%3E\"\r\n];\r\nvar k = 0;\r\n\r\nfunction slide(\r\n  slideshow_container,\r\n  slides_container,\r\n  previous_arrow,\r\n  next_arrow\r\n) {\r\n  var posX1 = 0,\r\n    posX2 = 0,\r\n    posInitial,\r\n    posFinal,\r\n    threshold = 100,\r\n    slides = slides_container.getElementsByClassName(\"slide\"),\r\n    slidesLength = slides.length,\r\n    slideSize = slides_container.getElementsByClassName(\"slide\")[0].offsetWidth,\r\n    firstSlide = slides[0],\r\n    lastSlide = slides[slidesLength - 1],\r\n    cloneFirst = firstSlide.cloneNode(true),\r\n    cloneLast = lastSlide.cloneNode(true),\r\n    index = 0,\r\n    allowShift = true;\r\n\r\n  slides_container.appendChild(cloneFirst);\r\n  slides_container.insertBefore(cloneLast, firstSlide);\r\n  slideshow_container.classList.add(\"loaded\");\r\n\r\n  slides_container.onmousedown = dragStart;\r\n\r\n  slides_container.addEventListener(\"touchstart\", dragStart);\r\n  slides_container.addEventListener(\"touchend\", dragEnd);\r\n  slides_container.addEventListener(\"touchmove\", dragAction);\r\n\r\n  slideshow_container.style.background = bg_color_options[k];\r\n  $(\".previous-arrow\").css(\r\n    \"background-image\",\r\n    'url(\"' + arrow_color_options[k] + '\")'\r\n  );\r\n  $(\".next-arrow\").css(\r\n    \"background-image\",\r\n    'url(\"' + arrow_color_options[k] + '\")'\r\n  );\r\n  \/\/$(\".text\").css(\"color\", text_color_options[k]);\r\n\r\n  previous_arrow.addEventListener(\"click\", function () {\r\n    shiftSlide(-1);\r\n    mouse.moved = false;\r\n\r\n    slideshow_container.classList.add(\"animation-next\");\r\n    setTimeout(() =&gt; {\r\n      slideshow_container.classList.remove(\"animation-next\");\r\n    }, 650);\r\n\r\n    if (k === 0) {\r\n      k = bg_color_options.length;\r\n    }\r\n    k = k - 1;\r\n    slideshow_container.style.background = bg_color_options[k];\r\n    $(\".previous-arrow\").css(\r\n      \"background-image\",\r\n      'url(\"' + arrow_color_options[k] + '\")'\r\n    );\r\n    $(\".next-arrow\").css(\r\n      \"background-image\",\r\n      'url(\"' + arrow_color_options[k] + '\")'\r\n    );\r\n    \/\/$(\".text\").css(\"color\", text_color_options[k]);\r\n  });\r\n\r\n  next_arrow.addEventListener(\"click\", function () {\r\n    shiftSlide(1);\r\n    mouse.moved = false;\r\n\r\n    slideshow_container.classList.add(\"animation-previous\");\r\n    setTimeout(() =&gt; {\r\n      slideshow_container.classList.remove(\"animation-previous\");\r\n    }, 650);\r\n\r\n    k = k + 1;\r\n    k = k % bg_color_options.length;\r\n    slideshow_container.style.background = bg_color_options[k];\r\n    $(\".previous-arrow\").css(\r\n      \"background-image\",\r\n      'url(\"' + arrow_color_options[k] + '\")'\r\n    );\r\n    $(\".next-arrow\").css(\r\n      \"background-image\",\r\n      'url(\"' + arrow_color_options[k] + '\")'\r\n    );\r\n    \/\/$(\".text\").css(\"color\", text_color_options[k]);\r\n  });\r\n\r\n  slides_container.addEventListener(\"transitionend\", checkIndex);\r\n\r\n  function dragStart(e) {\r\n    e = e || window.event;\r\n    e.preventDefault();\r\n    posInitial = slides_container.offsetLeft;\r\n\r\n    if (e.type == \"touchstart\") {\r\n      posX1 = e.touches[0].clientX;\r\n    } else {\r\n      posX1 = e.clientX;\r\n      document.onmouseup = dragEnd;\r\n      document.onmousemove = dragAction;\r\n    }\r\n  }\r\n\r\n  function dragAction(e) {\r\n    e = e || window.event;\r\n\r\n    if (e.type == \"touchmove\") {\r\n      posX2 = posX1 - e.touches[0].clientX;\r\n      posX1 = e.touches[0].clientX;\r\n    } else {\r\n      posX2 = posX1 - e.clientX;\r\n      posX1 = e.clientX;\r\n    }\r\n    slides_container.style.left = slides_container.offsetLeft - posX2 + \"px\";\r\n  }\r\n\r\n  function dragEnd(e) {\r\n    posFinal = slides_container.offsetLeft;\r\n    if (posFinal - posInitial &lt; -threshold) {\r\n      shiftSlide(1, \"drag\");\r\n      slideshow_container.classList.add(\"animation-previous\");\r\n      setTimeout(() =&gt; {\r\n        slideshow_container.classList.remove(\"animation-previous\");\r\n      }, 650);\r\n      k = k + 1;\r\n      k = k % bg_color_options.length;\r\n      slideshow_container.style.background = bg_color_options[k];\r\n      $(\".previous-arrow\").css(\r\n        \"background-image\",\r\n        'url(\"' + arrow_color_options[k] + '\")'\r\n      );\r\n      $(\".next-arrow\").css(\r\n        \"background-image\",\r\n        'url(\"' + arrow_color_options[k] + '\")'\r\n      );\r\n      \/\/$(\".text\").css(\"color\", text_color_options[k]);\r\n    } else if (posFinal - posInitial &gt; threshold) {\r\n      shiftSlide(-1, \"drag\");\r\n      slideshow_container.classList.add(\"animation-next\");\r\n      setTimeout(() =&gt; {\r\n        slideshow_container.classList.remove(\"animation-next\");\r\n      }, 650);\r\n      if (k === 0) {\r\n        k = bg_color_options.length;\r\n      }\r\n      k = k - 1;\r\n      slideshow_container.style.background = bg_color_options[k];\r\n      $(\".previous-arrow\").css(\r\n        \"background-image\",\r\n        'url(\"' + arrow_color_options[k] + '\")'\r\n      );\r\n      $(\".next-arrow\").css(\r\n        \"background-image\",\r\n        'url(\"' + arrow_color_options[k] + '\")'\r\n      );\r\n      \/\/$(\".text\").css(\"color\", text_color_options[k]);\r\n    } else {\r\n      slides_container.style.left = posInitial + \"px\";\r\n    }\r\n\r\n    document.onmouseup = null;\r\n    document.onmousemove = null;\r\n  }\r\n\r\n  function shiftSlide(direction, action) {\r\n    slides_container.classList.add(\"shifting\");\r\n\r\n    if (allowShift) {\r\n      if (!action) {\r\n        posInitial = slides_container.offsetLeft;\r\n      }\r\n\r\n      if (direction == 1) {\r\n        slides_container.style.left = posInitial - slideSize + \"px\";\r\n        index++;\r\n      } else if (direction == -1) {\r\n        slides_container.style.left = posInitial + slideSize + \"px\";\r\n        index--;\r\n      }\r\n    }\r\n\r\n    allowShift = false;\r\n  }\r\n\r\n  function checkIndex() {\r\n    slides_container.classList.remove(\"shifting\");\r\n\r\n    if (index == -1) {\r\n      slides_container.style.left = -(slidesLength * slideSize) + \"px\";\r\n      index = slidesLength - 1;\r\n    }\r\n\r\n    if (index == slidesLength) {\r\n      slides_container.style.left = -(1 * slideSize) + \"px\";\r\n      index = 0;\r\n    }\r\n\r\n    allowShift = true;\r\n  }\r\n}\r\nslide(slideshow_container, slides_container, previous_arrow, next_arrow);\r\n\r\n\/\/---___---___---___---___---___---___---___---___---\/\/\r\nvar slideshow_parameters = $(\".slideshow-container\")[0].getBoundingClientRect();\r\nvar mouse = { x: 0, y: 0, moved: false };\r\n\r\n$(\".slideshow-container\").mousemove(function (e) {\r\n  mouse.moved = true;\r\n  mouse.x = e.clientX - slideshow_parameters.left;\r\n  mouse.y = e.clientY - slideshow_parameters.top;\r\n});\r\n\r\n$(\".slideshow-container\").mouseleave(function (e) {\r\n  mouse.moved = false;\r\n  mouse.x = e.clientX - slideshow_parameters.left;\r\n  mouse.y = e.clientY - slideshow_parameters.top;\r\n});\r\n\r\nTweenLite.ticker.addEventListener(\"tick\", function () {\r\n  if (mouse.moved) {\r\n    parallaxIt(\".image-container\", 25);\r\n    parallaxIt(\".text\", -65);\r\n  } else if (!mouse.moved) {\r\n    parallaxIt(\".image-container\", 0);\r\n    parallaxIt(\".text\", 0);\r\n  }\r\n});\r\n\r\nfunction parallaxIt(target, movement) {\r\n  TweenMax.to(target, 0.7, {\r\n    x:\r\n      ((mouse.x - slideshow_parameters.width \/ 2) \/\r\n        slideshow_parameters.width \/\r\n        2) *\r\n      movement,\r\n    y:\r\n      ((mouse.y - slideshow_parameters.height \/ 2) \/\r\n        slideshow_parameters.height \/\r\n        2) *\r\n      movement\r\n  });\r\n}\r\n\r\n$(window).on(\"resize scroll\", function () {\r\n  slideshow_parameters = $(\".slideshow-container\")[0].getBoundingClientRect();\r\n});\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Draggable infinite slideshow with TweenMax parallax effects. See the <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/js-tutorial-draggable-infinite-slideshow-with-tweenmax-js-draggable-js\/\" title=\"JS Tutorial &#8211; Draggable Infinite Slideshow with tweenmax.js &#038; draggable.js\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3527,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,12],"tags":[353,264,263,354,352,103,227],"newstopic":[],"class_list":{"0":"post-3483","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"category-web-development","9":"tag-draggable-js","10":"tag-javascript-tutorial","11":"tag-js-tutorial","12":"tag-slideshow","13":"tag-tweenmax-js","14":"tag-web-design","15":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3483","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=3483"}],"version-history":[{"count":2,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3483\/revisions"}],"predecessor-version":[{"id":3486,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3483\/revisions\/3486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3527"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3483"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}