Skip to content

Commit a496194

Browse files
committed
feat(carousel): add scroll-buttons-position attribute
1 parent aa76b6d commit a496194

File tree

3 files changed

+60
-15
lines changed

3 files changed

+60
-15
lines changed

src/components/carousel/carousel.component.ts

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,9 @@ export default class Carousel extends LitElement {
154154
@property({ type: String, attribute: 'dot-appearance' })
155155
dotAppearance: 'circle' | 'bar' = 'bar';
156156

157+
@property({ type: String, attribute: 'scroll-button-position' })
158+
scrollButtonsPosition: 'inside' | 'outside' = 'inside';
159+
157160
@query('.button-previous') previousBtn!: HTMLButtonElement;
158161
@query('.button-next') nextBtn!: HTMLButtonElement;
159162
@query('.container') container!: HTMLSlotElement;
@@ -366,8 +369,11 @@ export default class Carousel extends LitElement {
366369
</button>`;
367370
}
368371

369-
renderNextPrevButtons() {
370-
return html`<div class="buttons">
372+
renderNextPreviousButtons() {
373+
return html`<div
374+
class="scroll-buttons scroll-buttons--${this.scrollButtonsPosition}"
375+
part="scroll-buttons"
376+
>
371377
<button part="button button-previous" class="button button-previous" type="button">
372378
<svg
373379
xmlns="http://www.w3.org/2000/svg"
@@ -402,7 +408,8 @@ export default class Carousel extends LitElement {
402408
<div part="viewport" class="viewport">
403409
<slot part="container" class="container" @slotchange=${this.handleSlotChange}></slot>
404410
</div>
405-
${this.withFullscreen ? this.renderFullscreenButton() : ''} ${this.renderNextPrevButtons()}
411+
${this.withFullscreen ? this.renderFullscreenButton() : ''}
412+
${this.renderNextPreviousButtons()}
406413
${this.withDots
407414
? html`<div class="dots" part="dots" role="tablist">
408415
${map(this.embla.scrollSnapList(), (_, index) => {

src/components/carousel/carousel.stories.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,12 @@ export const Product: Story = {
176176

177177
export const MoreProducts: Story = {
178178
render: () => html`
179-
<zx-carousel drag-free with-scrollbar style="--slide-size: calc(100% / 3); --slide-gap: 1rem;">
179+
<zx-carousel
180+
drag-free
181+
with-scrollbar
182+
scroll-button-position="outside"
183+
style="--slide-size: calc(100% / 3); --slide-gap: 1rem"
184+
>
180185
${repeat(
181186
Array.from({ length: 10 }),
182187
() => html`

src/components/carousel/carousel.styles.ts

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -87,22 +87,37 @@ export default css`
8787
min-width: 0;
8888
}
8989
90-
.buttons {
90+
/*
91+
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
92+
🆂🅲🆁🅾🅻🅻-🅱🆄🆃🆃🅾🅽🆂
93+
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
94+
*/
95+
.scroll-buttons--inside {
9196
position: absolute;
9297
inset: 0;
9398
pointer-events: none;
9499
}
95100
96-
.inactive .buttons {
101+
.scroll-buttons--outside {
102+
/*
103+
--button-arrow-color: white;
104+
--button-bg: var(--dot-color-active);
105+
--button-color: white;
106+
--button-size: 44px;
107+
*/
108+
109+
display: flex;
110+
gap: 6px;
111+
justify-content: end;
112+
}
113+
114+
.inactive .scroll-buttons {
97115
display: none;
98116
}
99117
100118
.button-next,
101119
.button-previous,
102120
.button-fullscreen {
103-
position: absolute;
104-
top: calc(50% - (var(--button-size) / 2));
105-
z-index: 1;
106121
display: flex;
107122
align-items: center;
108123
justify-content: center;
@@ -120,14 +135,36 @@ export default css`
120135
-webkit-appearance: none;
121136
}
122137
123-
.button-previous {
138+
.scroll-buttons--inside .button-previous,
139+
.scroll-buttons--inside .button-next,
140+
.button-fullscreen {
141+
position: absolute;
142+
top: calc(50% - (var(--button-size) / 2));
143+
z-index: 1;
144+
}
145+
146+
.scroll-buttons--outside .button-previous,
147+
.scroll-buttons--outside .button-next {
148+
}
149+
150+
.scroll-buttons--inside .button-previous {
124151
left: var(--button-offset);
125152
}
126153
127-
.button-next {
154+
.scroll-buttons--inside .button-next {
128155
right: var(--button-offset);
129156
}
130157
158+
.scroll-buttons--inside .button:disabled {
159+
visibility: hidden;
160+
}
161+
162+
.button:disabled {
163+
cursor: not-allowed;
164+
pointer-events: none;
165+
opacity: 0.4;
166+
}
167+
131168
.button-fullscreen {
132169
border-radius: 4px;
133170
right: var(--button-offset);
@@ -149,10 +186,6 @@ export default css`
149186
}
150187
}
151188
152-
.button:disabled {
153-
visibility: hidden;
154-
}
155-
156189
.button svg {
157190
width: var(--button-arrow-size);
158191
height: var(--button-arrow-size);

0 commit comments

Comments
 (0)