svelte-light-slider

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