effect-fade.mjs 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import { e as effectInit } from '../shared/effect-init.mjs';
  2. import { e as effectTarget } from '../shared/effect-target.mjs';
  3. import { e as effectVirtualTransitionEnd } from '../shared/effect-virtual-transition-end.mjs';
  4. import { g as getSlideTransformEl } from '../shared/utils.mjs';
  5. function EffectFade(_ref) {
  6. let {
  7. swiper,
  8. extendParams,
  9. on
  10. } = _ref;
  11. extendParams({
  12. fadeEffect: {
  13. crossFade: false
  14. }
  15. });
  16. const setTranslate = () => {
  17. const {
  18. slides
  19. } = swiper;
  20. const params = swiper.params.fadeEffect;
  21. for (let i = 0; i < slides.length; i += 1) {
  22. const slideEl = swiper.slides[i];
  23. const offset = slideEl.swiperSlideOffset;
  24. let tx = -offset;
  25. if (!swiper.params.virtualTranslate) tx -= swiper.translate;
  26. let ty = 0;
  27. if (!swiper.isHorizontal()) {
  28. ty = tx;
  29. tx = 0;
  30. }
  31. const slideOpacity = swiper.params.fadeEffect.crossFade ? Math.max(1 - Math.abs(slideEl.progress), 0) : 1 + Math.min(Math.max(slideEl.progress, -1), 0);
  32. const targetEl = effectTarget(params, slideEl);
  33. targetEl.style.opacity = slideOpacity;
  34. targetEl.style.transform = `translate3d(${tx}px, ${ty}px, 0px)`;
  35. }
  36. };
  37. const setTransition = duration => {
  38. const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));
  39. transformElements.forEach(el => {
  40. el.style.transitionDuration = `${duration}ms`;
  41. });
  42. effectVirtualTransitionEnd({
  43. swiper,
  44. duration,
  45. transformElements,
  46. allSlides: true
  47. });
  48. };
  49. effectInit({
  50. effect: 'fade',
  51. swiper,
  52. on,
  53. setTranslate,
  54. setTransition,
  55. overwriteParams: () => ({
  56. slidesPerView: 1,
  57. slidesPerGroup: 1,
  58. watchSlidesProgress: true,
  59. spaceBetween: 0,
  60. virtualTranslate: !swiper.params.cssMode
  61. })
  62. });
  63. }
  64. export { EffectFade as default };