0.0.4 • Published 9 months ago
svelte-light-slider v0.0.4
Light Slider
This is a simple barebones slider for svelte. A minimal slider implementation performace focused.
Using the library
Just import Light Slider into your code and pass your slides as child. The slider itself has minimal CSS so you can style your slider from the parent component. The library also has a IntersectObserver callback implemented so you can easely pass down a callback.
Showing arrows
To show navigation arrows, pass your own prev and next elements inside a "navigation" slot:
<LightSlider
dinamicHideArrows={true}
observerCallback={(entries) => {
entries.forEach((entry) => {
isIntersecting(entry)
});}}
>
<div slot="navigation">
<div class="arrow prev">{'<'}</div>
<div class="arrow next">{'>'}</div>
</div>
<div>
<div class="content"></div>
</div>
</LightSlider>
Implementation example
<script lang="ts">
import LightSlider from "$lib/light-slider.svelte";
const isIntersecting = (entry: IntersectionObserverEntry) => {
if(entry.isIntersecting) {
setTimeout(() => {
(entry.target as HTMLElement).style.opacity = `.7`;
}, 1000)
} else {
(entry.target as HTMLElement).style.removeProperty('opacity');
}
}
</script>
<LightSlider
dinamicHideArrows={true}
observerCallback={(entries) => entries.forEach((entry) => isIntersecting(entry))}
>
<div slot="navigation">
<div class="arrow prev">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
</div>
<div class="arrow next">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
</div>
<div>
<div class="content"></div>
</div>
<div>
<div class="content"></div>
</div>
<div>
<div class="content big"></div>
</div>
<div>
<div class="content"></div>
</div>
<div>
<div class="content"></div>
</div>
<div>
<div class="content"></div>
</div>
<div>
<div class="content"></div>
</div>
</LightSlider>
<style>
.content {
min-width: 300px;
min-height: 300px;
background: gray;
border-radius: 10px;
}
.content.big {
min-width: 600px;
}
.arrow {
width: 30px;
height: 30px;
display: flex;
position: absolute;
top: 50%;
margin-top: -15px;
background: white;
z-index: 10;
border-radius: 50%;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 0 4px 1px rgba(0,0,0,.3);
}
.arrow.prev {
left: 0;
}
.arrow.next {
right: 0;
}
</style>
Obsevations
If the use is on mobile device, the slider will fallback to css implementation