effect-carousel.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import effectInit from '../../shared/effect-init.js';
  2. import effectTarget from '../../shared/effect-target.js';
  3. export default function EffectCarousel({
  4. swiper,
  5. extendParams,
  6. on
  7. }) {
  8. extendParams({
  9. carouselEffect: {}
  10. });
  11. const setTranslate = () => {
  12. const scaleStep = 0.2;
  13. const zIndexMax = swiper.slides.length;
  14. for (let i = 0; i < swiper.slides.length; i += 1) {
  15. const slideEl = swiper.slides[i];
  16. const slideProgress = swiper.slides[i].progress;
  17. const absProgress = Math.abs(slideProgress);
  18. let modify = 1;
  19. if (absProgress > 1) {
  20. modify = (absProgress - 1) * 0.3 + 1;
  21. }
  22. const translate = `${slideProgress * modify * 50}%`;
  23. const scale = 1 - absProgress * scaleStep;
  24. const zIndex = zIndexMax - Math.abs(Math.round(slideProgress));
  25. const slideTransform = `translateX(${translate}) scale(${scale})`;
  26. slideEl.transform(slideTransform);
  27. slideEl.css({
  28. zIndex: zIndex
  29. })
  30. if (absProgress > 3) {
  31. slideEl.css({
  32. opacity: 0
  33. })
  34. } else {
  35. slideEl.css({
  36. opacity: 1
  37. })
  38. }
  39. }
  40. };
  41. const setTransition = duration => {
  42. const {
  43. transformEl
  44. } = swiper.params.coverflowEffect;
  45. const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
  46. for (var i = 0; i < $transitionElements.length; i++) {
  47. $transitionElements[i].transition(duration);
  48. }
  49. };
  50. effectInit({
  51. effect: 'carousel',
  52. swiper,
  53. on,
  54. setTranslate,
  55. setTransition,
  56. perspective: () => true,
  57. overwriteParams: () => ({
  58. watchSlidesProgress: true,
  59. slidesPerView: 'auto',
  60. centeredSlides: true,
  61. })
  62. });
  63. }