diff --git a/src/element/swiper-element.js b/src/element/swiper-element.js
index 5bdc04871..58854ab35 100644
--- a/src/element/swiper-element.js
+++ b/src/element/swiper-element.js
@@ -205,16 +205,16 @@ class SwiperSlide extends ClassToExtend {
this.shadowEl = this.attachShadow({ mode: 'open' });
}
- initialize() {
+ render() {
const lazy =
this.lazy || this.getAttribute('lazy') === '' || this.getAttribute('lazy') === 'true';
- this.tempDiv.innerHTML = `
-
- `;
+ this.tempDiv.innerHTML = ``;
+
[...this.tempDiv.children].forEach((el) => {
this.shadowEl.appendChild(el);
});
+
if (lazy) {
const lazyDiv = document.createElement('div');
lazyDiv.classList.add('swiper-lazy-preloader');
@@ -222,6 +222,10 @@ class SwiperSlide extends ClassToExtend {
}
}
+ initialize() {
+ this.render();
+ }
+
connectedCallback() {
this.initialize();
}
diff --git a/src/modules/effect-cards/effect-cards.js b/src/modules/effect-cards/effect-cards.js
index 5a5e402a0..b83bae491 100644
--- a/src/modules/effect-cards/effect-cards.js
+++ b/src/modules/effect-cards/effect-cards.js
@@ -2,13 +2,12 @@ import createShadow from '../../shared/create-shadow.js';
import effectInit from '../../shared/effect-init.js';
import effectTarget from '../../shared/effect-target.js';
import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
-import { findElementsInElements } from '../../shared/utils.js';
+import { getSlideTransformEl } from '../../shared/utils.js';
export default function EffectCards({ swiper, extendParams, on }) {
extendParams({
cardsEffect: {
slideShadows: true,
- transformEl: null,
rotate: true,
perSlideRotate: 2,
perSlideOffset: 8,
@@ -104,19 +103,15 @@ export default function EffectCards({ swiper, extendParams, on }) {
};
const setTransition = (duration) => {
- const { transformEl } = swiper.params.cardsEffect;
-
- const transitionElements = transformEl
- ? findElementsInElements(swiper.slides, transformEl)
- : swiper.slides;
- transitionElements.forEach((el) => {
+ const transformElements = swiper.slides.map((slideEl) => getSlideTransformEl(slideEl));
+ transformElements.forEach((el) => {
el.style.transition = `${duration}ms`;
el.querySelectorAll('.swiper-slide-shadow').forEach((shadowEl) => {
shadowEl.style.transition = `${duration}ms`;
});
});
- effectVirtualTransitionEnd({ swiper, duration, transformEl });
+ effectVirtualTransitionEnd({ swiper, duration, transformElements });
};
effectInit({
diff --git a/src/modules/effect-coverflow/effect-coverflow.js b/src/modules/effect-coverflow/effect-coverflow.js
index 8f491e68b..677c93e2f 100644
--- a/src/modules/effect-coverflow/effect-coverflow.js
+++ b/src/modules/effect-coverflow/effect-coverflow.js
@@ -1,7 +1,7 @@
import createShadow from '../../shared/create-shadow.js';
import effectInit from '../../shared/effect-init.js';
import effectTarget from '../../shared/effect-target.js';
-import { findElementsInElements } from '../../shared/utils.js';
+import { getSlideTransformEl } from '../../shared/utils.js';
export default function EffectCoverflow({ swiper, extendParams, on }) {
extendParams({
@@ -12,7 +12,6 @@ export default function EffectCoverflow({ swiper, extendParams, on }) {
scale: 1,
modifier: 1,
slideShadows: true,
- transformEl: null,
},
});
@@ -86,11 +85,9 @@ export default function EffectCoverflow({ swiper, extendParams, on }) {
}
};
const setTransition = (duration) => {
- const { transformEl } = swiper.params.coverflowEffect;
- const transitionElements = transformEl
- ? findElementsInElements(swiper.slides, transformEl)
- : swiper.slides;
- transitionElements.forEach((el) => {
+ const transformElements = swiper.slides.map((slideEl) => getSlideTransformEl(slideEl));
+
+ transformElements.forEach((el) => {
el.style.transition = `${duration}ms`;
el.querySelectorAll(
'.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left',
diff --git a/src/modules/effect-creative/effect-creative.js b/src/modules/effect-creative/effect-creative.js
index fd931bfbd..b28756765 100644
--- a/src/modules/effect-creative/effect-creative.js
+++ b/src/modules/effect-creative/effect-creative.js
@@ -2,12 +2,11 @@ import createShadow from '../../shared/create-shadow.js';
import effectInit from '../../shared/effect-init.js';
import effectTarget from '../../shared/effect-target.js';
import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
-import { findElementsInElements } from '../../shared/utils.js';
+import { getSlideTransformEl } from '../../shared/utils.js';
export default function EffectCreative({ swiper, extendParams, on }) {
extendParams({
creativeEffect: {
- transformEl: null,
limitProgress: 1,
shadowPerProgress: false,
progressMultiplier: 1,
@@ -130,19 +129,16 @@ export default function EffectCreative({ swiper, extendParams, on }) {
};
const setTransition = (duration) => {
- const { transformEl } = swiper.params.creativeEffect;
+ const transformElements = swiper.slides.map((slideEl) => getSlideTransformEl(slideEl));
- const transitionElements = transformEl
- ? findElementsInElements(swiper.slides, transformEl)
- : swiper.slides;
- transitionElements.forEach((el) => {
+ transformElements.forEach((el) => {
el.style.transition = `${duration}ms`;
el.querySelectorAll('.swiper-slide-shadow').forEach((shadowEl) => {
shadowEl.style.transition = `${duration}ms`;
});
});
- effectVirtualTransitionEnd({ swiper, duration, transformEl, allSlides: true });
+ effectVirtualTransitionEnd({ swiper, duration, transformElements, allSlides: true });
};
effectInit({
diff --git a/src/modules/effect-fade/effect-fade.js b/src/modules/effect-fade/effect-fade.js
index 28fc44918..c44b6a3e8 100644
--- a/src/modules/effect-fade/effect-fade.js
+++ b/src/modules/effect-fade/effect-fade.js
@@ -1,13 +1,12 @@
import effectInit from '../../shared/effect-init.js';
import effectTarget from '../../shared/effect-target.js';
import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
-import { findElementsInElements } from '../../shared/utils.js';
+import { getSlideTransformEl } from '../../shared/utils.js';
export default function EffectFade({ swiper, extendParams, on }) {
extendParams({
fadeEffect: {
crossFade: false,
- transformEl: null,
},
});
@@ -34,16 +33,12 @@ export default function EffectFade({ swiper, extendParams, on }) {
}
};
const setTransition = (duration) => {
- const { transformEl } = swiper.params.fadeEffect;
-
- const transitionElements = transformEl
- ? findElementsInElements(swiper.slides, transformEl)
- : swiper.slides;
- transitionElements.forEach((el) => {
+ const transformElements = swiper.slides.map((slideEl) => getSlideTransformEl(slideEl));
+ transformElements.forEach((el) => {
el.style.transition = `${duration}ms`;
});
- effectVirtualTransitionEnd({ swiper, duration, transformEl, allSlides: true });
+ effectVirtualTransitionEnd({ swiper, duration, transformElements, allSlides: true });
};
effectInit({
diff --git a/src/modules/effect-flip/effect-flip.js b/src/modules/effect-flip/effect-flip.js
index db098ddcb..b9d03a394 100644
--- a/src/modules/effect-flip/effect-flip.js
+++ b/src/modules/effect-flip/effect-flip.js
@@ -2,14 +2,13 @@ import createShadow from '../../shared/create-shadow.js';
import effectInit from '../../shared/effect-init.js';
import effectTarget from '../../shared/effect-target.js';
import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
-import { findElementsInElements } from '../../shared/utils.js';
+import { getSlideTransformEl } from '../../shared/utils.js';
export default function EffectFlip({ swiper, extendParams, on }) {
extendParams({
flipEffect: {
slideShadows: true,
limitRotation: true,
- transformEl: null,
},
});
@@ -78,11 +77,9 @@ export default function EffectFlip({ swiper, extendParams, on }) {
};
const setTransition = (duration) => {
- const { transformEl } = swiper.params.flipEffect;
- const transitionElements = transformEl
- ? findElementsInElements(swiper.slides, transformEl)
- : swiper.slides;
- transitionElements.forEach((el) => {
+ const transformElements = swiper.slides.map((slideEl) => getSlideTransformEl(slideEl));
+
+ transformElements.forEach((el) => {
el.style.transition = `${duration}ms`;
el.querySelectorAll(
'.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left',
@@ -91,7 +88,7 @@ export default function EffectFlip({ swiper, extendParams, on }) {
});
});
- effectVirtualTransitionEnd({ swiper, duration, transformEl });
+ effectVirtualTransitionEnd({ swiper, duration, transformElements });
};
effectInit({
diff --git a/src/shared/create-shadow.js b/src/shared/create-shadow.js
index d92599775..442299d3d 100644
--- a/src/shared/create-shadow.js
+++ b/src/shared/create-shadow.js
@@ -1,8 +1,8 @@
-import { createElement } from './utils.js';
+import { createElement, getSlideTransformEl } from './utils.js';
export default function createShadow(params, slideEl, side) {
const shadowClass = `swiper-slide-shadow${side ? `-${side}` : ''}`;
- const shadowContainer = params.transformEl ? slideEl.querySelector(params.transformEl) : slideEl;
+ const shadowContainer = getSlideTransformEl(slideEl);
let shadowEl = shadowContainer.querySelector(`.${shadowClass}`);
if (!shadowEl) {
diff --git a/src/shared/effect-target.js b/src/shared/effect-target.js
index 06d190527..c3518a92b 100644
--- a/src/shared/effect-target.js
+++ b/src/shared/effect-target.js
@@ -1,11 +1,10 @@
+import { getSlideTransformEl } from './utils.js';
+
export default function effectTarget(effectParams, slideEl) {
- if (effectParams.transformEl) {
- const transformEl = slideEl.querySelector(effectParams.transformEl);
- if (transformEl) {
- transformEl.style.backfaceVisibility = 'hidden';
- transformEl.style['-webkit-backface-visibility'] = 'hidden';
- }
- return transformEl;
+ const transformEl = getSlideTransformEl(slideEl);
+ if (transformEl !== slideEl) {
+ transformEl.style.backfaceVisibility = 'hidden';
+ transformEl.style['-webkit-backface-visibility'] = 'hidden';
}
- return slideEl;
+ return transformEl;
}
diff --git a/src/shared/effect-virtual-transition-end.js b/src/shared/effect-virtual-transition-end.js
index d8bde2a18..dc5c54365 100644
--- a/src/shared/effect-virtual-transition-end.js
+++ b/src/shared/effect-virtual-transition-end.js
@@ -1,16 +1,34 @@
-import { elementTransitionEnd, findElementsInElements } from './utils.js';
+import { elementIndex, elementTransitionEnd } from './utils.js';
-export default function effectVirtualTransitionEnd({ swiper, duration, transformEl, allSlides }) {
- const { slides, activeIndex } = swiper;
+export default function effectVirtualTransitionEnd({
+ swiper,
+ duration,
+ transformElements,
+ allSlides,
+}) {
+ const { activeIndex } = swiper;
+ const getSlide = (el) => {
+ if (!el.parentElement) {
+ // assume shadow root
+ const slide = swiper.slides.filter(
+ (slideEl) => slideEl.shadowEl && slideEl.shadowEl === el.parentNode,
+ )[0];
+ return slide;
+ }
+ return el.parentElement;
+ };
if (swiper.params.virtualTranslate && duration !== 0) {
let eventTriggered = false;
let transitionEndTarget;
if (allSlides) {
- transitionEndTarget = transformEl ? findElementsInElements(slides, transformEl) : slides;
+ transitionEndTarget = transformElements;
} else {
- transitionEndTarget = transformEl
- ? [...slides[activeIndex].querySelectorAll(activeIndex)]
- : [slides[activeIndex]];
+ transitionEndTarget = transformElements.filter((transformEl) => {
+ const el = transformEl.classList.contains('swiper-slide-transform')
+ ? getSlide(transformEl)
+ : transformEl;
+ return elementIndex(el) === activeIndex;
+ });
}
transitionEndTarget.forEach((el) => {
elementTransitionEnd(el, () => {
diff --git a/src/shared/utils.js b/src/shared/utils.js
index 786066ae2..0f276a11e 100644
--- a/src/shared/utils.js
+++ b/src/shared/utils.js
@@ -186,6 +186,14 @@ function animateCSSModeScroll({ swiper, targetPosition, side }) {
animate();
}
+function getSlideTransformEl(slideEl) {
+ return (
+ slideEl.querySelector('.swiper-slide-transform') ||
+ (slideEl.shadowEl && slideEl.shadowEl.querySelector('.swiper-slide-transform')) ||
+ slideEl
+ );
+}
+
function findElementsInElements(elements = [], selector = '') {
const found = [];
elements.forEach((el) => {
@@ -311,6 +319,7 @@ export {
extend,
getComputedStyle,
setCSSProperty,
+ getSlideTransformEl,
// dom
findElementsInElements,
createElement,
diff --git a/src/types/modules/effect-cards.d.ts b/src/types/modules/effect-cards.d.ts
index 3205a5970..15fa11b5d 100644
--- a/src/types/modules/effect-cards.d.ts
+++ b/src/types/modules/effect-cards.d.ts
@@ -32,11 +32,4 @@ export interface CardsEffectOptions {
* @default 8
*/
perSlideOffset?: number;
-
- /**
- * CSS selector of the element inside of the slide to transform instead of the slide itself. Useful to use with cssMode
- *
- * @default null
- */
- transformEl?: CSSSelector;
}
diff --git a/src/types/modules/effect-coverflow.d.ts b/src/types/modules/effect-coverflow.d.ts
index e95dde789..6e93a5188 100644
--- a/src/types/modules/effect-coverflow.d.ts
+++ b/src/types/modules/effect-coverflow.d.ts
@@ -41,10 +41,4 @@ export interface CoverflowEffectOptions {
* @default 1
*/
modifier?: number;
- /**
- * CSS selector of the element inside of the slide to transform instead of the slide itself. Useful to use with cssMode
- *
- * @default null
- */
- transformEl?: CSSSelector;
}
diff --git a/src/types/modules/effect-creative.d.ts b/src/types/modules/effect-creative.d.ts
index 5ae48cef9..db0188907 100644
--- a/src/types/modules/effect-creative.d.ts
+++ b/src/types/modules/effect-creative.d.ts
@@ -60,12 +60,7 @@ export interface CreativeEffectOptions {
*
*/
next?: CreativeEffectTransform;
- /**
- * CSS selector of the element inside of the slide to transform instead of the slide itself. Useful to use with cssMode
- *
- * @default null
- */
- transformEl?: CSSSelector;
+
/**
* Limit progress/offset to amount of side slides. If `1`, then slides all slides after prev/next will have same state. If `2`, then all slides after 2nd before/after active will have same state, etc.
*
diff --git a/src/types/modules/effect-fade.d.ts b/src/types/modules/effect-fade.d.ts
index 8478d4bea..520ac9027 100644
--- a/src/types/modules/effect-fade.d.ts
+++ b/src/types/modules/effect-fade.d.ts
@@ -11,10 +11,4 @@ export interface FadeEffectOptions {
* @default false
*/
crossFade?: boolean;
- /**
- * CSS selector of the element inside of the slide to transform instead of the slide itself. Useful to use with cssMode
- *
- * @default null
- */
- transformEl?: CSSSelector;
}
diff --git a/src/types/modules/effect-flip.d.ts b/src/types/modules/effect-flip.d.ts
index f3de1e6b5..3205f8e27 100644
--- a/src/types/modules/effect-flip.d.ts
+++ b/src/types/modules/effect-flip.d.ts
@@ -17,10 +17,4 @@ export interface FlipEffectOptions {
* @default true
*/
limitRotation?: boolean;
- /**
- * CSS selector of the element inside of the slide to transform instead of the slide itself. Useful to use with cssMode
- *
- * @default null
- */
- transformEl?: CSSSelector;
}