API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Nov 19th, 2019
163
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.62 KB | None | 0 0
raw download clone embed print report
  1. // Carousel JS
  2. (function () {
  3. "use strict";
  4. // ========== Page Loaded Activate ==========
  5. var carouselStartId;
  6.  
  7. function carouselStart() {
  8.  
  9. return setInterval(function () {
  10. var $activeImg = $("#carousel-2 .carousel_img picture.active-img"),
  11. $nextImg = $activeImg.next(),
  12. // Pagination Dots
  13. $activePagination = $("#carousel-2 .carousel_pagination.active-img"),
  14. $nextPagination = $activePagination.next()
  15.  
  16. // Logic
  17. if ($activeImg.is(":last-child")) {
  18. $nextImg = $activeImg.siblings().first();
  19. $nextPagination = $activePagination.siblings().first();
  20. } else {
  21. $nextImg = $activeImg.next();
  22. $nextPagination = $activePagination.next();
  23. }
  24.  
  25. // Animation: Image
  26. TweenMax.fromTo($activeImg, 1, { xPercent: 0, scale: 1 },
  27. { xPercent: -10, scale: 0.9, display: "none", zIndex: 1, ease: Power2.easeInOut });
  28.  
  29. TweenMax.fromTo($nextImg, 1, { xPercent: 100, scale: 1, zIndex: 9, display: "none" },
  30. { xPercent: 0, scale: 1, display: "block", zIndex: 9, ease: Power2.easeInOut });
  31.  
  32. // Image Active
  33. $activeImg.removeClass("active-img");
  34. $nextImg.addClass("active-img");
  35.  
  36. // Pagination Active
  37. $activePagination.removeClass("active-img");
  38. $nextPagination.addClass("active-img");
  39.  
  40. }, 4000);
  41. }
  42.  
  43. // ===== Carousel Pause =====
  44. function carouselPause() {
  45. clearInterval(carouselStartId);
  46.  
  47. TweenMax.to($(".carouselPause"), 0.2, { x: 20, opacity: 0, display: "none", scale: 0.3, ease: Power2.easeInOut });
  48. TweenMax.fromTo($(".carouselPlay"), 0.2, { x: -20, opacity: 0, scale: 0.3, display: "none" },
  49. { x: 0, opacity: 1, display: "block", scale: 1, ease: Power2.easeInOut });
  50. }
  51.  
  52. // ===== Carousel Play =====
  53. function carouselPlay() {
  54. clearInterval(carouselStartId);
  55. carouselStartId = carouselStart();
  56.  
  57. TweenMax.to($(".carouselPlay"), 0.2, { x: 20, opacity: 0, scale: 0.3, display: "none", ease: Power2.easeInOut });
  58. TweenMax.fromTo($(".carouselPause"), 0.2, { x: -20, opacity: 0, scale: 0.3, display: "none" },
  59. { x: 0, opacity: 1, scale: 1, display: "block", ease: Power2.easeInOut });
  60. }
  61.  
  62. // ===== Activate Carousel when DOM ready =====
  63. $(document).ready(carouselStartId = carouselStart());
  64.  
  65. window.onfocus = function () {
  66. if (!carouselStartId && $(".carouselPause").css("display") == "block") { // check if carouselId is null(preventing Safari from calling onfocus event twice) && carousel is playing
  67. carouselStartId = carouselStart();
  68. }
  69. };
  70.  
  71. window.onblur = function () {
  72. clearInterval(carouselStartId);
  73. carouselStartId = null; // clear the carouselId
  74. };
  75.  
  76. // Pause Button Click
  77. $(".carouselPause").click(function () {
  78. carouselPause();
  79. });
  80.  
  81. // Play Button Click
  82. $(".carouselPlay").click(function () {
  83. carouselPlay();
  84. });
  85.  
  86. var carouselArrowFired = false;
  87.  
  88. // ===== Next Arrow =====
  89. $("#carousel-2 .carousel_arrow-next").click(function () {
  90.  
  91. if (!carouselArrowFired) {
  92. carouselArrowFired = true;
  93.  
  94. if ($(".carouselPause").css("display") === "block") {
  95. // Clear carouselStart window object then call again
  96. clearInterval(carouselStartId);
  97. carouselStartId = carouselStart();
  98.  
  99. } else {
  100. clearInterval(carouselStartId);
  101. }
  102.  
  103. // Carousel Images
  104. var $activeImg = $("#carousel-2 .carousel_img .active-img"),
  105. $nextImg = $activeImg.next()
  106.  
  107. // Pagination Dots
  108. $activePagination = $("#carousel-2 .carousel_pagination.active-img"),
  109. $nextPagination = $activePagination.next()
  110.  
  111. // Logic
  112. if ($activeImg.is(":last-child")) {
  113. $nextImg = $activeImg.siblings().first();
  114. $nextPagination = $activePagination.siblings().first();
  115. } else {
  116. $nextImg = $activeImg.next();
  117. $nextPagination = $activePagination.next();
  118. }
  119.  
  120. // Animation: Image
  121. TweenMax.fromTo($activeImg, 1, { },
  122. { xPercent: -10, scale: 0.9, display: "none", zIndex: 1, ease: Power2.easeInOut });
  123.  
  124. TweenMax.fromTo($nextImg, 1, { xPercent: 100, scale: 1, zIndex: 9, display: "none" },
  125. { xPercent: 0, scale: 1, display: "block", zIndex: 9, ease: Power2.easeInOut });
  126.  
  127. // Prevent click event get firing multiple times within 700ms
  128. setTimeout(function () {
  129. carouselArrowFired = false;
  130. }, 700);
  131.  
  132. // Image Active
  133. $activeImg.removeClass("active-img");
  134. $nextImg.addClass("active-img");
  135.  
  136. // Pagination Active
  137. $activePagination.removeClass("active-img");
  138. $nextPagination.addClass("active-img");
  139.  
  140. }
  141. });
  142.  
  143. // ===== Previous Arrow =====
  144. $("#carousel-2 .carousel_arrow-prev").click(function () {
  145.  
  146. if (!carouselArrowFired) {
  147. carouselArrowFired = true;
  148.  
  149. if ($(".carouselPause").css("display") == "block") {
  150. // Clear carouselStart window object then call again
  151. clearInterval(carouselStartId);
  152. carouselStartId = carouselStart();
  153. } else {
  154. clearInterval(carouselStartId);
  155. }
  156.  
  157. // Carousel Images
  158. var $activeImg = $("#carousel-2 .carousel_img .active-img"),
  159. $prevImg = $activeImg.prev()
  160.  
  161. // Pagination Dots
  162. $activePagination = $("#carousel-2 .carousel_pagination.active-img"),
  163. $prevPagination = $activePagination.prev()
  164.  
  165. // Logic
  166. if ($activeImg.is(":first-child")) {
  167. $prevImg = $activeImg.siblings().last();
  168. $prevPagination = $activePagination.siblings("a").last();
  169. } else {
  170. $prevImg = $activeImg.prev();
  171. }
  172.  
  173. // Animation
  174. TweenMax.fromTo($activeImg, 1, { xPercent: 0, scale: 1, zIndex: 9 },
  175. { xPercent: 100, scale: 1, display: "none", ease: Power2.easeInOut });
  176.  
  177. TweenMax.fromTo($prevImg, 1, { xPercent: -10, scale: 0.9, zIndex: 1, display: "none" },
  178. { xPercent: 0, scale: 1, display: "block", zIndex: 9, ease: Power2.easeInOut });
  179.  
  180. // Prevent click event get firing multiple times within 700ms
  181. setTimeout(function () {
  182. carouselArrowFired = false;
  183. }, 700);
  184.  
  185. // Image Active
  186. $activeImg.removeClass("active-img"),
  187. $prevImg.addClass("active-img")
  188.  
  189. // Pagination Active
  190. $activePagination.removeClass("active-img"),
  191. $prevPagination.addClass("active-img")
  192. }
  193. });
  194.  
  195.  
  196. // ========== Pagination Click Events ==========
  197.  
  198. $("#carousel-2 .carousel_pagination").click(function () {
  199.  
  200. if ($(".carouselPause").css("display") == "block") {
  201. // Clear carouselStart window object then call again
  202. clearInterval(carouselStartId);
  203. carouselStartId = carouselStart();
  204. } else {
  205. clearInterval(carouselStartId);
  206. }
  207.  
  208.  
  209. var nextActiveIndex = $(this).attr("data-carousel-item"), // return an index
  210. currentIndex = $("#carousel-2 .carousel_pagination.active-img").attr("data-carousel-item");
  211.  
  212. // Carousel Images
  213. var $activeImg = $("#carousel-2 .carousel_img .active-img"),
  214. $nextImg = $("#carousel-2 .carousel_img").find("picture[carousel-index='" + nextActiveIndex + "']"),
  215.  
  216. // Pagination Dots
  217. $activePagination = $("#carousel-2 .carousel_pagination.active-img"),
  218. $nextPagination = $("#carousel-2 .carousel_controls").find("a[data-carousel-item='" + nextActiveIndex + "']");
  219.  
  220. // Condition for animation forward or backward
  221. if (nextActiveIndex > currentIndex) {
  222.  
  223. // Animation: Image
  224. TweenMax.fromTo($activeImg, 1, { xPercent: 0, scale: 1 },
  225. { xPercent: -10, scale: 0.9, display: "none", zIndex: 1, ease: Power2.easeInOut });
  226.  
  227. TweenMax.fromTo($nextImg, 1, { xPercent: 100, scale: 1, zIndex: 9, display: "none" },
  228. { xPercent: 0, scale: 1, display: "block", zIndex: 9, ease: Power2.easeInOut });
  229.  
  230. } else {
  231.  
  232. // Animation
  233. TweenMax.fromTo($activeImg, 1, { xPercent: 0, scale: 1 },
  234. { xPercent: 100, scale: 1, display: "none", ease: Power2.easeInOut });
  235.  
  236. TweenMax.fromTo($nextImg, 1, { xPercent: -10, scale: 0.9, zIndex: 1, display: "none" },
  237. { xPercent: 0, scale: 1, display: "block", zIndex: 9, ease: Power2.easeInOut });
  238. }
  239.  
  240. // Image Active
  241. $activeImg.removeClass("active-img");
  242. $nextImg.addClass("active-img");
  243.  
  244. // Pagination Active
  245. $activePagination.removeClass("active-img");
  246. $nextPagination.addClass("active-img");
  247. });
  248.  
  249.  
  250. // ========== Carousel Mobile JS ==========
  251.  
  252. // Don't use jQuery selector in Hammer.js
  253. var container = document.getElementById("carousel-2");
  254. var el = document.getElementById("carousel-img");
  255.  
  256. var paginationControl = document.getElementById("carousel-pagination");
  257.  
  258. var imgActive,
  259. imgNext,
  260. imgPrev,
  261. paginationActive,
  262. paginationNext,
  263. paginationPrev,
  264. startX = 0,
  265. BREAK_POINT_RATIO = .55,
  266. BREAK_POINT = container.offsetWidth * BREAK_POINT_RATIO,
  267. swipeLeftTriggered,
  268. swipeRightTriggered,
  269. swipeLeftReset,
  270. swipeRightReset,
  271. TRANSLATE_RATIO = .8,
  272. transform = {
  273. translate: { x: startX },
  274. };
  275.  
  276. var mc = new Hammer.Manager(el, { inputClass: Hammer.TouchInput }); // Mobile Input Only
  277.  
  278. mc.add(new Hammer.Pan({
  279. direction: Hammer.DIRECTION_HORIZONTAL,
  280. threshold: 0,
  281. pointers: 0
  282. }));
  283.  
  284. // ========== Pan Detection ==========
  285.  
  286. mc.on("panstart", function () {
  287. // Stop carousel automation when panning
  288. if ($(".carouselPause").css("display") == "block") {
  289. carouselPause();
  290. }
  291.  
  292. transform = {
  293. translate: { x: startX },
  294. };
  295.  
  296. imgActive = el.getElementsByClassName("active-img")[0];
  297. paginationActive = paginationControl.getElementsByClassName("active-img")[0];
  298.  
  299. imgNext = el.getElementsByClassName("active-img")[0].nextElementSibling;
  300. imgPrev = el.getElementsByClassName("active-img")[0].previousElementSibling;
  301. paginationNext = paginationControl.getElementsByClassName("active-img")[0].nextElementSibling;
  302. paginationPrev = paginationControl.getElementsByClassName("active-img")[0].previousElementSibling;
  303.  
  304. if (imgActive == el.children[4]) {
  305. imgNext = el.firstElementChild;
  306. paginationNext = paginationControl.firstElementChild;
  307.  
  308. } else if (imgActive == el.children[0]) {
  309. imgPrev = el.lastElementChild;
  310. paginationPrev = paginationControl.children[4];
  311. }
  312. });
  313.  
  314. // ========== Pan Left (Go next) & Pan Right (Go previous) ==========
  315.  
  316. mc.on("panleft panright", function (ev) {
  317.  
  318. if (imgActive) {
  319.  
  320. var panDistance = parseInt((startX + ev.deltaX) * TRANSLATE_RATIO);
  321.  
  322. // Condition: Pannig Right
  323. if (panDistance > 0) {
  324.  
  325. TweenLite.set(imgActive, {
  326. force3D: true,
  327. x: panDistance,
  328. zIndex: 9
  329. });
  330.  
  331. TweenLite.set(imgPrev, {
  332. force3D: true,
  333. xPercent: Math.min((panDistance / BREAK_POINT) * 10 - 10, 0),
  334. display: "block",
  335. scale: Math.min((panDistance / BREAK_POINT) * 0.1 + 0.9, 1),
  336. zIndex: 1
  337. });
  338. } else if (panDistance < 0) { // Condition: Pannig Left
  339.  
  340. TweenLite.set(imgActive, {
  341. force3D: true,
  342. xPercent: Math.max((BREAK_POINT - (-panDistance)) / BREAK_POINT * 10 + (-10), -10),
  343. scale: Math.max((BREAK_POINT - (-panDistance)) / BREAK_POINT * 0.1 + 0.9, 0.9),
  344. zIndex: 2
  345. });
  346.  
  347. TweenLite.set(imgNext, {
  348. force3D: true,
  349. x: panDistance,
  350. display: "block",
  351. xPercent: 100,
  352. scale: 1,
  353. zIndex: 9
  354. });
  355. }
  356.  
  357. // update the follow finger translate value
  358. if (ev.deltaX >= 0) {
  359. transform.translate = {
  360. x: startX + ev.deltaX
  361. };
  362. }
  363.  
  364. swipeLeftTriggered = false;
  365. swipeLeftReset = false;
  366. swipeRightTriggered = false;
  367. swipeRightReset = false;
  368.  
  369. // check the pan distance:
  370. if (panDistance <= (-BREAK_POINT)) {
  371. // user has swiped this object enough to trigger the event!
  372. swipeLeftTriggered = true;
  373. } else if (panDistance > (-BREAK_POINT) && panDistance < 0) {
  374. // reset
  375. swipeLeftReset = true;
  376. } else if (panDistance >= BREAK_POINT) {
  377. // user has swiped this object enough to trigger the event!
  378. swipeRightTriggered = true;
  379. } else if (panDistance < BREAK_POINT && panDistance > 0) {
  380. // reset
  381. swipeRightReset = true;
  382. }
  383. }
  384. });
  385.  
  386. // ========== Pan Released ==========
  387.  
  388. mc.on("panend pancancel", function () {
  389.  
  390. if (swipeLeftTriggered) {
  391. swipeLeftFunc("enter");
  392. } else if (swipeLeftReset) {
  393. swipeLeftFunc();
  394. } else if (swipeRightTriggered) {
  395. swipeRightFunc("enter");
  396. } else if (swipeRightReset) {
  397. swipeRightFunc();
  398. }
  399. });
  400.  
  401. // ========== Function: Swipt Left; Execute when releasing ==========
  402. function swipeLeftFunc(enter) {
  403.  
  404. if (enter) {
  405.  
  406. TweenLite.to(imgActive, .3, {
  407. force3D: true,
  408. ease: Cubic.easeInOut,
  409. x: 0,
  410. xPercent: -10,
  411. display: "none",
  412. scale: 0.9,
  413. zIndex: 1
  414. });
  415.  
  416. TweenLite.to(imgNext, .3, {
  417. force3D: true,
  418. ease: Cubic.easeInOut,
  419. x: 0,
  420. xPercent: 0,
  421. display: "block",
  422. scale: 1,
  423. zIndex: 9
  424. });
  425.  
  426. TweenLite.to(imgPrev, .3, {
  427. display: "none",
  428. });
  429.  
  430. imgActive.classList.remove("active-img");
  431. imgNext.classList.add("active-img");
  432.  
  433. paginationActive.classList.remove("active-img");
  434. paginationNext.classList.add("active-img");
  435.  
  436. } else { // Reset position
  437.  
  438. TweenLite.to(imgActive, .3, {
  439. force3D: true,
  440. ease: Cubic.easeInOut,
  441. x: 0,
  442. xPercent: 0,
  443. z: 0,
  444. zIndex: 2,
  445. scale: 1
  446. });
  447.  
  448. TweenLite.to(imgNext, .3, {
  449. force3D: true,
  450. ease: Cubic.easeInOut,
  451. x: 0,
  452. xPercent: 100,
  453. display: "none",
  454. scale: 1,
  455. zIndex: 9
  456. });
  457. }
  458. }
  459.  
  460. // ========== Function: Swipt Right; Execute when releasing ==========
  461. function swipeRightFunc(enter) {
  462.  
  463. if (enter) {
  464.  
  465. TweenLite.to(imgActive, .3, {
  466. force3D: true,
  467. ease: Cubic.easeInOut,
  468. x: 0,
  469. z: 0,
  470. xPercent: 100,
  471. display: "none",
  472. scale: 1,
  473. zIndex: 9
  474. });
  475.  
  476. TweenLite.to(imgPrev, .3, {
  477. force3D: true,
  478. ease: Cubic.easeInOut,
  479. x: 0,
  480. z: 0,
  481. xPercent: 0,
  482. display: "block",
  483. scale: 1,
  484. zIndex: 1
  485. });
  486.  
  487. TweenLite.to(imgNext, .3, {
  488. display: "none",
  489. });
  490.  
  491. imgActive.classList.remove("active-img");
  492. imgPrev.classList.add("active-img");
  493.  
  494. paginationActive.classList.remove("active-img");
  495. paginationPrev.classList.add("active-img");
  496.  
  497. } else { // Reset position
  498.  
  499. TweenLite.to(imgActive, .3, {
  500. force3D: true,
  501. ease: Cubic.easeInOut,
  502. x: 0,
  503. xPercent: 0,
  504. zIndex: 9,
  505. scale: 1,
  506. display: "block",
  507. });
  508.  
  509. TweenLite.to(imgPrev, .3, {
  510. force3D: true,
  511. ease: Cubic.easeInOut,
  512. x: 0,
  513. xPercent: -20,
  514. display: "none",
  515. scale: 0.9,
  516. zIndex: 1,
  517. });
  518. }
  519. } // End of Carousel Mobile JS
  520.  
  521. })(); // End of Carousel JS
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!