effect-fade.js 1.8 KB

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