swiper-effects.js 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. import { CLS, eachChild, isHorizontal, transform, transition, triggerTransitionEnd } from './swiper-utils';
  2. import { isIosUIWebView, isSafari } from '../../../platform/platform-utils';
  3. /*=========================
  4. Effects
  5. ===========================*/
  6. export var SWIPER_EFFECTS = {
  7. 'fade': {
  8. setTranslate: function (s) {
  9. for (var i = 0; i < s._slides.length; i++) {
  10. var slide = s._slides[i];
  11. var offset = slide.swiperSlideOffset;
  12. var tx = -offset;
  13. if (!s.virtualTranslate) {
  14. tx = tx - s._translate;
  15. }
  16. var ty = 0;
  17. if (!isHorizontal(s)) {
  18. ty = tx;
  19. tx = 0;
  20. }
  21. var slideOpacity = s.fade.crossFade ?
  22. Math.max(1 - Math.abs(slide.progress), 0) :
  23. 1 + Math.min(Math.max(slide.progress, -1), 0);
  24. slide.style.opacity = slideOpacity;
  25. transform(slide, 'translate3d(' + tx + 'px, ' + ty + 'px, 0px)');
  26. }
  27. },
  28. setTransition: function (s, plt, duration) {
  29. var slides = s._slides;
  30. for (var i = 0; i < slides.length; i++) {
  31. transition(slides[i], duration);
  32. }
  33. if (s.virtualTranslate && duration !== 0) {
  34. var eventTriggered = false;
  35. for (var i_1 = 0; i_1 < slides.length; i_1++) {
  36. plt.transitionEnd(slides[i_1], function () {
  37. if (eventTriggered || !s)
  38. return;
  39. eventTriggered = true;
  40. s._animating = false;
  41. triggerTransitionEnd(plt, s._wrapper);
  42. });
  43. }
  44. }
  45. }
  46. },
  47. 'flip': {
  48. setTranslate: function (s, plt) {
  49. for (var i = 0; i < s._slides.length; i++) {
  50. var slide = s._slides[i];
  51. var progress = slide.progress;
  52. if (s.flip.limitRotation) {
  53. progress = Math.max(Math.min(slide.progress, 1), -1);
  54. }
  55. var offset = slide.swiperSlideOffset;
  56. var rotate = -180 * progress, rotateY = rotate, rotateX = 0, tx = -offset, ty = 0;
  57. if (!isHorizontal(s)) {
  58. ty = tx;
  59. tx = 0;
  60. rotateX = -rotateY;
  61. rotateY = 0;
  62. }
  63. else if (s._rtl) {
  64. rotateY = -rotateY;
  65. }
  66. slide.style.zIndex = -Math.abs(Math.round(progress)) + s._slides.length;
  67. if (s.flip.slideShadows) {
  68. // Set shadows
  69. var shadowBefore = (isHorizontal(s) ? slide.querySelector('.swiper-slide-shadow-left') : slide.querySelector('.swiper-slide-shadow-top'));
  70. var shadowAfter = (isHorizontal(s) ? slide.querySelector('.swiper-slide-shadow-right') : slide.querySelector('.swiper-slide-shadow-bottom'));
  71. if (!shadowBefore) {
  72. shadowBefore = plt.doc().createElement('div');
  73. shadowBefore.className = 'swiper-slide-shadow-' + (isHorizontal(s) ? 'left' : 'top');
  74. slide.appendChild(shadowBefore);
  75. }
  76. if (!shadowAfter) {
  77. shadowAfter = plt.doc().createElement('div');
  78. shadowAfter.className = 'swiper-slide-shadow-' + (isHorizontal(s) ? 'right' : 'bottom');
  79. slide.appendChild(shadowAfter);
  80. }
  81. if (shadowBefore) {
  82. shadowBefore.style.opacity = Math.max(-progress, 0);
  83. }
  84. if (shadowAfter) {
  85. shadowAfter.style.opacity = Math.max(progress, 0);
  86. }
  87. }
  88. transform(slide, 'translate3d(' + tx + 'px, ' + ty + 'px, 0px) rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)');
  89. }
  90. },
  91. setTransition: function (s, plt, duration) {
  92. for (var i = 0; i < s._slides.length; i++) {
  93. var slide = s._slides[i];
  94. transition(slide, duration);
  95. eachChild(slide, '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left', function (el) {
  96. transition(el, duration);
  97. });
  98. }
  99. if (s.virtualTranslate && duration !== 0) {
  100. var eventTriggered = false;
  101. plt.transitionEnd(s._slides[s._activeIndex], function (ev) {
  102. if (eventTriggered || !s)
  103. return;
  104. if (!ev.target.classList.contains(CLS.slideActive)) {
  105. return;
  106. }
  107. eventTriggered = true;
  108. s._animating = false;
  109. triggerTransitionEnd(plt, s._wrapper);
  110. });
  111. }
  112. }
  113. },
  114. 'cube': {
  115. setTranslate: function (s, plt) {
  116. var wrapperRotate = 0;
  117. var cubeShadow;
  118. if (s.cube.shadow) {
  119. if (isHorizontal(s)) {
  120. cubeShadow = s._wrapper.querySelector('.swiper-cube-shadow');
  121. if (!cubeShadow) {
  122. cubeShadow = plt.doc().createElement('div');
  123. cubeShadow.className = 'swiper-cube-shadow';
  124. s._wrapper.appendChild(cubeShadow);
  125. }
  126. cubeShadow.style.height = s.renderedWidth + 'px';
  127. }
  128. else {
  129. cubeShadow = s.container.querySelector('.swiper-cube-shadow');
  130. if (!cubeShadow) {
  131. cubeShadow = plt.doc().createElement('div');
  132. cubeShadow.className = 'swiper-cube-shadow';
  133. s._wrapper.appendChild(cubeShadow);
  134. }
  135. }
  136. }
  137. for (var i = 0; i < s._slides.length; i++) {
  138. var slide = s._slides[i];
  139. var slideAngle = i * 90;
  140. var round = Math.floor(slideAngle / 360);
  141. if (s._rtl) {
  142. slideAngle = -slideAngle;
  143. round = Math.floor(-slideAngle / 360);
  144. }
  145. var progress = Math.max(Math.min(slide.progress, 1), -1);
  146. var tx = 0, ty = 0, tz = 0;
  147. if (i % 4 === 0) {
  148. tx = -round * 4 * s._renderedSize;
  149. tz = 0;
  150. }
  151. else if ((i - 1) % 4 === 0) {
  152. tx = 0;
  153. tz = -round * 4 * s._renderedSize;
  154. }
  155. else if ((i - 2) % 4 === 0) {
  156. tx = s._renderedSize + round * 4 * s._renderedSize;
  157. tz = s._renderedSize;
  158. }
  159. else if ((i - 3) % 4 === 0) {
  160. tx = -s._renderedSize;
  161. tz = 3 * s._renderedSize + s._renderedSize * 4 * round;
  162. }
  163. if (s._rtl) {
  164. tx = -tx;
  165. }
  166. if (!isHorizontal(s)) {
  167. ty = tx;
  168. tx = 0;
  169. }
  170. var transformStr = 'rotateX(' + (isHorizontal(s) ? 0 : -slideAngle) + 'deg) rotateY(' + (isHorizontal(s) ? slideAngle : 0) + 'deg) translate3d(' + tx + 'px, ' + ty + 'px, ' + tz + 'px)';
  171. if (progress <= 1 && progress > -1) {
  172. wrapperRotate = i * 90 + progress * 90;
  173. if (s._rtl)
  174. wrapperRotate = -i * 90 - progress * 90;
  175. }
  176. transform(slide, transformStr);
  177. if (s.cube.slideShadows) {
  178. // Set shadows
  179. var shadowBefore = (isHorizontal(s) ? slide.querySelector('.swiper-slide-shadow-left') : slide.querySelector('.swiper-slide-shadow-top'));
  180. var shadowAfter = (isHorizontal(s) ? slide.querySelector('.swiper-slide-shadow-right') : slide.querySelector('.swiper-slide-shadow-bottom'));
  181. if (!shadowBefore) {
  182. shadowBefore = plt.doc().createElement('div');
  183. shadowBefore.className = 'swiper-slide-shadow-' + (isHorizontal(s) ? 'left' : 'top');
  184. slide.appendChild(shadowBefore);
  185. }
  186. if (!shadowAfter) {
  187. shadowAfter = plt.doc().createElement('div');
  188. shadowAfter.className = 'swiper-slide-shadow-' + (isHorizontal(s) ? 'right' : 'bottom');
  189. slide.appendChild(shadowAfter);
  190. }
  191. if (shadowBefore)
  192. shadowBefore.style.opacity = Math.max(-progress, 0);
  193. if (shadowAfter)
  194. shadowAfter.style.opacity = Math.max(progress, 0);
  195. }
  196. }
  197. s._wrapper.style.transformOrigin = s._wrapper.style.webkitTransformOrigin = '50% 50% -' + (s._renderedSize / 2) + 'px';
  198. if (s.cube.shadow) {
  199. if (isHorizontal(s)) {
  200. transform(cubeShadow, 'translate3d(0px, ' + (s.renderedWidth / 2 + s.cube.shadowOffset) + 'px, ' + (-s.renderedWidth / 2) + 'px) rotateX(90deg) rotateZ(0deg) scale(' + (s.cube.shadowScale) + ')');
  201. }
  202. else {
  203. var shadowAngle = Math.abs(wrapperRotate) - Math.floor(Math.abs(wrapperRotate) / 90) * 90;
  204. var multiplier = 1.5 - (Math.sin(shadowAngle * 2 * Math.PI / 360) / 2 + Math.cos(shadowAngle * 2 * Math.PI / 360) / 2);
  205. var scale1 = s.cube.shadowScale;
  206. var scale2 = s.cube.shadowScale / multiplier;
  207. var offset = s.cube.shadowOffset;
  208. transform(cubeShadow, 'scale3d(' + scale1 + ', 1, ' + scale2 + ') translate3d(0px, ' + (s.renderedHeight / 2 + offset) + 'px, ' + (-s.renderedHeight / 2 / scale2) + 'px) rotateX(-90deg)');
  209. }
  210. }
  211. var zFactor = (isSafari(plt) || isIosUIWebView(plt)) ? (-s._renderedSize / 2) : 0;
  212. transform(s._wrapper, 'translate3d(0px,0,' + zFactor + 'px) rotateX(' + (isHorizontal(s) ? 0 : wrapperRotate) + 'deg) rotateY(' + (isHorizontal(s) ? -wrapperRotate : 0) + 'deg)');
  213. },
  214. setTransition: function (s, _plt, duration) {
  215. for (var i = 0; i < s._slides.length; i++) {
  216. var slide = s._slides[i];
  217. transition(slide, duration);
  218. eachChild(slide, '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left', function (el) {
  219. transition(el, duration);
  220. });
  221. }
  222. if (s.cube.shadow && !isHorizontal(s)) {
  223. eachChild(s.container, '.swiper-cube-shadow', function (el) {
  224. transition(el, duration);
  225. });
  226. }
  227. }
  228. },
  229. 'coverflow': {
  230. setTranslate: function (s, plt) {
  231. var transformStr = s._translate;
  232. var center = isHorizontal(s) ? -transformStr + s.renderedWidth / 2 : -transformStr + s.renderedHeight / 2;
  233. var rotate = isHorizontal(s) ? s.coverflow.rotate : -s.coverflow.rotate;
  234. var translate = s.coverflow.depth;
  235. // Each slide offset from center
  236. for (var i = 0, length = s._slides.length; i < length; i++) {
  237. var slide = s._slides[i];
  238. var slideSize = s._slidesSizesGrid[i];
  239. var slideOffset = slide.swiperSlideOffset;
  240. var offsetMultiplier = (center - slideOffset - slideSize / 2) / slideSize * s.coverflow.modifier;
  241. var rotateY = isHorizontal(s) ? rotate * offsetMultiplier : 0;
  242. var rotateX = isHorizontal(s) ? 0 : rotate * offsetMultiplier;
  243. // var rotateZ = 0
  244. var translateZ = -translate * Math.abs(offsetMultiplier);
  245. var translateY = isHorizontal(s) ? 0 : s.coverflow.stretch * (offsetMultiplier);
  246. var translateX = isHorizontal(s) ? s.coverflow.stretch * (offsetMultiplier) : 0;
  247. // Fix for ultra small values
  248. if (Math.abs(translateX) < 0.001)
  249. translateX = 0;
  250. if (Math.abs(translateY) < 0.001)
  251. translateY = 0;
  252. if (Math.abs(translateZ) < 0.001)
  253. translateZ = 0;
  254. if (Math.abs(rotateY) < 0.001)
  255. rotateY = 0;
  256. if (Math.abs(rotateX) < 0.001)
  257. rotateX = 0;
  258. var slideTransform = 'translate3d(' + translateX + 'px,' + translateY + 'px,' + translateZ + 'px) rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)';
  259. transform(slide, slideTransform);
  260. slide.style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
  261. if (s.coverflow.slideShadows) {
  262. // Set shadows
  263. var shadowBefore = (isHorizontal(s) ? slide.querySelector('.swiper-slide-shadow-left') : slide.querySelector('.swiper-slide-shadow-top'));
  264. var shadowAfter = (isHorizontal(s) ? slide.querySelector('.swiper-slide-shadow-right') : slide.querySelector('.swiper-slide-shadow-bottom'));
  265. if (!shadowBefore) {
  266. shadowBefore = plt.doc().createElement('div');
  267. shadowBefore.className = 'swiper-slide-shadow-' + (isHorizontal(s) ? 'left' : 'top');
  268. slide.appendChild(shadowBefore);
  269. }
  270. if (!shadowAfter) {
  271. shadowAfter = plt.doc().createElement('div');
  272. shadowAfter.className = 'swiper-slide-shadow-' + (isHorizontal(s) ? 'right' : 'bottom');
  273. slide.appendChild(shadowAfter);
  274. }
  275. if (shadowBefore) {
  276. shadowBefore.style.opacity = (offsetMultiplier > 0 ? offsetMultiplier : 0);
  277. }
  278. if (shadowAfter) {
  279. shadowAfter.style.opacity = ((-offsetMultiplier) > 0 ? -offsetMultiplier : 0);
  280. }
  281. }
  282. }
  283. },
  284. setTransition: function (s, _plt, duration) {
  285. for (var i = 0; i < s._slides.length; i++) {
  286. var slide = s._slides[i];
  287. transition(slide, duration);
  288. eachChild(slide, '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left', function (el) {
  289. transition(el, duration);
  290. });
  291. }
  292. }
  293. }
  294. };
  295. //# sourceMappingURL=swiper-effects.js.map