autoplay.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. /* eslint no-underscore-dangle: "off" */
  2. /* eslint no-use-before-define: "off" */
  3. import { getDocument } from 'ssr-window';
  4. import { nextTick } from '../../shared/utils.js';
  5. export default function Autoplay(_ref) {
  6. let {
  7. swiper,
  8. extendParams,
  9. on,
  10. emit
  11. } = _ref;
  12. let timeout;
  13. swiper.autoplay = {
  14. running: false,
  15. paused: false
  16. };
  17. extendParams({
  18. autoplay: {
  19. enabled: false,
  20. delay: 3000,
  21. waitForTransition: true,
  22. disableOnInteraction: true,
  23. stopOnLastSlide: false,
  24. reverseDirection: false,
  25. pauseOnMouseEnter: false
  26. }
  27. });
  28. function run() {
  29. const $activeSlideEl = swiper.slides.eq(swiper.activeIndex);
  30. let delay = swiper.params.autoplay.delay;
  31. if ($activeSlideEl.attr('data-swiper-autoplay')) {
  32. delay = $activeSlideEl.attr('data-swiper-autoplay') || swiper.params.autoplay.delay;
  33. }
  34. clearTimeout(timeout);
  35. timeout = nextTick(() => {
  36. let autoplayResult;
  37. if (swiper.params.autoplay.reverseDirection) {
  38. if (swiper.params.loop) {
  39. swiper.loopFix();
  40. autoplayResult = swiper.slidePrev(swiper.params.speed, true, true);
  41. emit('autoplay');
  42. } else if (!swiper.isBeginning) {
  43. autoplayResult = swiper.slidePrev(swiper.params.speed, true, true);
  44. emit('autoplay');
  45. } else if (!swiper.params.autoplay.stopOnLastSlide) {
  46. autoplayResult = swiper.slideTo(swiper.slides.length - 1, swiper.params.speed, true, true);
  47. emit('autoplay');
  48. } else {
  49. stop();
  50. }
  51. } else if (swiper.params.loop) {
  52. swiper.loopFix();
  53. autoplayResult = swiper.slideNext(swiper.params.speed, true, true);
  54. emit('autoplay');
  55. } else if (!swiper.isEnd) {
  56. autoplayResult = swiper.slideNext(swiper.params.speed, true, true);
  57. emit('autoplay');
  58. } else if (!swiper.params.autoplay.stopOnLastSlide) {
  59. autoplayResult = swiper.slideTo(0, swiper.params.speed, true, true);
  60. emit('autoplay');
  61. } else {
  62. stop();
  63. }
  64. if (swiper.params.cssMode && swiper.autoplay.running) run();else if (autoplayResult === false) {
  65. run();
  66. }
  67. }, delay);
  68. }
  69. function start() {
  70. if (typeof timeout !== 'undefined') return false;
  71. if (swiper.autoplay.running) return false;
  72. swiper.autoplay.running = true;
  73. emit('autoplayStart');
  74. run();
  75. return true;
  76. }
  77. function stop() {
  78. if (!swiper.autoplay.running) return false;
  79. if (typeof timeout === 'undefined') return false;
  80. if (timeout) {
  81. clearTimeout(timeout);
  82. timeout = undefined;
  83. }
  84. swiper.autoplay.running = false;
  85. emit('autoplayStop');
  86. return true;
  87. }
  88. function pause(speed) {
  89. if (!swiper.autoplay.running) return;
  90. if (swiper.autoplay.paused) return;
  91. if (timeout) clearTimeout(timeout);
  92. swiper.autoplay.paused = true;
  93. if (speed === 0 || !swiper.params.autoplay.waitForTransition) {
  94. swiper.autoplay.paused = false;
  95. run();
  96. } else {
  97. ['transitionend', 'webkitTransitionEnd'].forEach(event => {
  98. swiper.$wrapperEl[0].addEventListener(event, onTransitionEnd);
  99. });
  100. }
  101. }
  102. function onVisibilityChange() {
  103. const document = getDocument();
  104. if (document.visibilityState === 'hidden' && swiper.autoplay.running) {
  105. pause();
  106. }
  107. if (document.visibilityState === 'visible' && swiper.autoplay.paused) {
  108. run();
  109. swiper.autoplay.paused = false;
  110. }
  111. }
  112. function onTransitionEnd(e) {
  113. if (!swiper || swiper.destroyed || !swiper.$wrapperEl) return;
  114. if (e.target !== swiper.$wrapperEl[0]) return;
  115. ['transitionend', 'webkitTransitionEnd'].forEach(event => {
  116. swiper.$wrapperEl[0].removeEventListener(event, onTransitionEnd);
  117. });
  118. swiper.autoplay.paused = false;
  119. if (!swiper.autoplay.running) {
  120. stop();
  121. } else {
  122. run();
  123. }
  124. }
  125. function onMouseEnter() {
  126. if (swiper.params.autoplay.disableOnInteraction) {
  127. stop();
  128. } else {
  129. emit('autoplayPause');
  130. pause();
  131. }
  132. ['transitionend', 'webkitTransitionEnd'].forEach(event => {
  133. swiper.$wrapperEl[0].removeEventListener(event, onTransitionEnd);
  134. });
  135. }
  136. function onMouseLeave() {
  137. if (swiper.params.autoplay.disableOnInteraction) {
  138. return;
  139. }
  140. swiper.autoplay.paused = false;
  141. emit('autoplayResume');
  142. run();
  143. }
  144. function attachMouseEvents() {
  145. if (swiper.params.autoplay.pauseOnMouseEnter) {
  146. swiper.$el.on('mouseenter', onMouseEnter);
  147. swiper.$el.on('mouseleave', onMouseLeave);
  148. }
  149. }
  150. function detachMouseEvents() {
  151. swiper.$el.off('mouseenter', onMouseEnter);
  152. swiper.$el.off('mouseleave', onMouseLeave);
  153. }
  154. on('init', () => {
  155. if (swiper.params.autoplay.enabled) {
  156. start();
  157. const document = getDocument();
  158. document.addEventListener('visibilitychange', onVisibilityChange);
  159. attachMouseEvents();
  160. }
  161. });
  162. on('beforeTransitionStart', (_s, speed, internal) => {
  163. if (swiper.autoplay.running) {
  164. if (internal || !swiper.params.autoplay.disableOnInteraction) {
  165. swiper.autoplay.pause(speed);
  166. } else {
  167. stop();
  168. }
  169. }
  170. });
  171. on('sliderFirstMove', () => {
  172. if (swiper.autoplay.running) {
  173. if (swiper.params.autoplay.disableOnInteraction) {
  174. stop();
  175. } else {
  176. pause();
  177. }
  178. }
  179. });
  180. on('touchEnd', () => {
  181. if (swiper.params.cssMode && swiper.autoplay.paused && !swiper.params.autoplay.disableOnInteraction) {
  182. run();
  183. }
  184. });
  185. on('destroy', () => {
  186. detachMouseEvents();
  187. if (swiper.autoplay.running) {
  188. stop();
  189. }
  190. const document = getDocument();
  191. document.removeEventListener('visibilitychange', onVisibilityChange);
  192. });
  193. Object.assign(swiper.autoplay, {
  194. pause,
  195. run,
  196. start,
  197. stop
  198. });
  199. }