public/svelte-carousel
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #108 from vadimkorr/feature/#101_Keyboard-control

Browse Source 
#101 Keyboard control
This commit is contained in:
Vadim
2022-05-04 22:52:24 +03:00
committed by GitHub
parent 4aa7a4eebc c6679b52e7
commit 6c17b22eca
3 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Arrow/Arrow.svelte
View File

@@ -12,8 +12,8 @@
export let disabled = false export let disabled = false
</script> </script>
<div <button
class="sc-carousel-arrow__circle" class="sc-carousel-button sc-carousel-arrow__circle"
class:sc-carousel-arrow__circle_disabled={disabled} class:sc-carousel-arrow__circle_disabled={disabled}
on:click on:click
> >
@@ -22,7 +22,7 @@
class:sc-carousel-arrow__arrow-next={direction === NEXT} class:sc-carousel-arrow__arrow-next={direction === NEXT}
class:sc-carousel-arrow__arrow-prev={direction === PREV} class:sc-carousel-arrow__arrow-prev={direction === PREV}
></i> ></i>
</div> </button>
<style> <style>
:root { :root {
@@ -61,4 +61,4 @@
.sc-carousel-arrow__circle_disabled:hover { .sc-carousel-arrow__circle_disabled:hover {
opacity: 0.5; opacity: 0.5;
} }
</style> </style>

7
src/components/Carousel/Carousel.svelte
View File

@@ -368,4 +368,11 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
} }
:global(.sc-carousel-button) {
all: unset;
cursor: pointer;
}
:global(.sc-carousel-button:focus) {
outline: 5px auto;
}
</style> </style>

7
src/components/Dot/Dot.svelte
View File

@@ -5,11 +5,11 @@
export let active = false export let active = false
</script> </script>
<div <button
class="sc-carousel-dot__dot" class="sc-carousel-button sc-carousel-dot__dot"
class:sc-carousel-dot__dot_active={active} class:sc-carousel-dot__dot_active={active}
on:click on:click
></div> ></button>
<style> <style>
:root { :root {
@@ -17,6 +17,7 @@
--sc-active-dot-size: 8px; --sc-active-dot-size: 8px;
--sc-dot-size-animation-time: 250ms; --sc-dot-size-animation-time: 250ms;
} }
.sc-carousel-dot__dot { .sc-carousel-dot__dot {
background-color: var(--sc-color-rgb-light); background-color: var(--sc-color-rgb-light);
border-radius: 50%; border-radius: 50%;