Skip to content

Commit 697b028

Browse files
nolimits4webnolimits4web
committed
feat(element): support slides as slots
1 parent 22e89d1 commit 697b028

File tree

5 files changed

+63
-20
lines changed

5 files changed

+63
-20
lines changed

‎playground/element/index.html

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@
88
</head>
99

1010
<body>
11-
<swiper-container>
12-
<swiper-slide>Slide 1</swiper-slide>
13-
<swiper-slide>Slide 2</swiper-slide>
14-
<swiper-slide>Slide 3</swiper-slide>
15-
<swiper-slide>Slide 4</swiper-slide>
16-
<swiper-slide>Slide 5</swiper-slide>
17-
<swiper-slide>Slide 6</swiper-slide>
18-
<swiper-slide>Slide 7</swiper-slide>
19-
<swiper-slide>Slide 8</swiper-slide>
20-
<swiper-slide>Slide 9</swiper-slide>
21-
<swiper-slide>Slide 10</swiper-slide>
11+
<swiper-container effect="cube">
12+
<div slot="slide-0">Slide 1</div>
13+
<div slot="slide-1">Slide 2</div>
14+
<div slot="slide-2">Slide 3</div>
15+
<div slot="slide-3">Slide 4</div>
16+
<div slot="slide-4">Slide 5</div>
17+
<div slot="slide-5">Slide 6</div>
18+
<div slot="slide-6">Slide 7</div>
19+
<div slot="slide-7">Slide 8</div>
20+
<div slot="slide-8">Slide 9</div>
21+
<div slot="slide-9">Slide 10</div>
2222
</swiper-container>
2323
<style>
2424
body,
@@ -35,7 +35,7 @@
3535
margin: 50px auto;
3636
}
3737

38-
swiper-slide {
38+
swiper-container::part(slide) {
3939
background: #f1f1f1;
4040
color: #000;
4141
text-align: center;

‎src/components-shared/get-params.mjs

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import { Swiper } from '../swiper.mjs';
21
import { isObject, extend } from './utils.mjs';
32
import { paramsList } from './params-list.mjs';
3+
import defaults from '../core/defaults.mjs';
44

55
function getParams(obj = {}, splitEvents = true) {
66
const params = {
77
on: {},
88
};
99
const events = {};
1010
const passedParams = {};
11-
extend(params, Swiper.defaults);
12-
extend(params, Swiper.extendedDefaults);
11+
extend(params, defaults);
1312
params._emitClasses = true;
1413
params.init = false;
1514

‎src/core/core.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -514,7 +514,7 @@ class Swiper {
514514
Object.assign(swiper, {
515515
el,
516516
wrapperEl,
517-
slidesEl: swiper.isElement ? el.parentNode.host : wrapperEl,
517+
slidesEl: swiper.isElement && !el.parentNode.host.slideSlots ? el.parentNode.host : wrapperEl,
518518
hostEl: swiper.isElement ? el.parentNode.host : el,
519519
mounted: true,
520520

‎src/core/modules/observer/observer.mjs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@ export default function Observer({ swiper, extendParams, on, emit }) {
3838
const init = () => {
3939
if (!swiper.params.observer) return;
4040
if (swiper.params.observeParents) {
41-
const containerParents = elementParents(swiper.el);
41+
const containerParents = elementParents(swiper.hostEl);
4242
for (let i = 0; i < containerParents.length; i += 1) {
4343
attach(containerParents[i]);
4444
}
4545
}
4646
// Observe container
47-
attach(swiper.el, {
47+
attach(swiper.hostEl, {
4848
childList: swiper.params.observeSlideChildren,
4949
});
5050

‎src/swiper-element.mjs

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,43 @@ class SwiperContainer extends ClassToExtend {
6565
return this.injectStylesUrls || [];
6666
}
6767

68+
calcSlideSlots() {
69+
const currentSideSlots = this.slideSlots || 0;
70+
// slide slots
71+
const slideSlotChildren = [...this.querySelectorAll(`[slot^=slide-]`)].map((child) => {
72+
return parseInt(child.getAttribute('slot').split('slide-')[1], 10);
73+
});
74+
this.slideSlots = slideSlotChildren.length ? Math.max(...slideSlotChildren) + 1 : 0;
75+
if (!this.rendered) return;
76+
if (this.slideSlots > currentSideSlots) {
77+
for (let i = currentSideSlots; i < this.slideSlots; i += 1) {
78+
const slideEl = document.createElement('swiper-slide');
79+
slideEl.setAttribute('part', `slide slide-${i + 1}`);
80+
const slotEl = document.createElement('slot');
81+
slotEl.setAttribute('name', `slide-${i + 1}`);
82+
slideEl.appendChild(slotEl);
83+
this.shadowRoot.querySelector('.swiper-wrapper').appendChild(slideEl);
84+
}
85+
} else if (this.slideSlots < currentSideSlots) {
86+
const slides = this.swiper.slides;
87+
for (let i = slides.length - 1; i >= 0; i -= 1) {
88+
if (i > this.slideSlots) {
89+
slides[i].remove();
90+
}
91+
}
92+
}
93+
}
94+
6895
render() {
6996
if (this.rendered) return;
7097

98+
this.calcSlideSlots();
99+
71100
// local styles
72-
const localStyles = this.cssStyles();
101+
let localStyles = this.cssStyles();
102+
if (this.slideSlots > 0) {
103+
localStyles = localStyles.replace(/::slotted\(([a-z-0-9.]*)\)/g, '$1');
104+
}
73105
if (localStyles.length) {
74106
addStyle(this.shadowRoot, localStyles);
75107
}
@@ -86,11 +118,17 @@ class SwiperContainer extends ClassToExtend {
86118
const el = document.createElement('div');
87119
el.classList.add('swiper');
88120
el.part = 'container';
121+
89122
// prettier-ignore
90123
el.innerHTML = `
91124
<slot name="container-start"></slot>
92125
<div class="swiper-wrapper" part="wrapper">
93126
<slot></slot>
127+
${Array.from({length: this.slideSlots}).map((_, index) => `
128+
<swiper-slide part="slide slide-${index}">
129+
<slot name="slide-${index}"></slot>
130+
</swiper-slide>
131+
`).join('')}
94132
</div>
95133
<slot name="container-end"></slot>
96134
${needsNavigation(this.passedParams) ? `
@@ -117,12 +155,18 @@ class SwiperContainer extends ClassToExtend {
117155
delete this.swiperParams.init;
118156

119157
this.render();
158+
120159
// eslint-disable-next-line
121160
this.swiper = new Swiper(this.shadowRoot.querySelector('.swiper'), {
161+
...(swiperParams.virtual
162+
? {}
163+
: { observer: true, observeSlideChildren: this.slideSlots > 0 }),
122164
...swiperParams,
123165
touchEventsTarget: 'container',
124-
...(swiperParams.virtual ? {} : { observer: true }),
125166
onAny: (name, ...args) => {
167+
if (name === 'observerUpdate') {
168+
this.calcSlideSlots();
169+
}
126170
const eventName = swiperParams.eventsPrefix
127171
? `${swiperParams.eventsPrefix}${name.toLowerCase()}`
128172
: name.toLowerCase();

0 commit comments

Comments
 (0)