astro-splide

Install

npm install astro-splide

Read the full doc on Github

Examples

Simple Example

Simple splide example, which is a slider of 3 images.

• 
• 
• 

Full code

Code Snippet

---
import "@splidejs/splide/css"
import { Splide, SplideSlide } from 'astro-splide';
---
<Splide
  class='not-content'
  options={ {
    type: 'loop',
    interval: 1000,
    autoplay: true,
    pauseOnHover: false,
  } }
>
  <SplideSlide>  <img src='https://picsum.photos/1024/512?nb=1' alt=''/>  </SplideSlide>
  <SplideSlide>  <img src='https://picsum.photos/1024/512?nb=2' alt=''/>  </SplideSlide>
  <SplideSlide>  <img src='https://picsum.photos/1024/512?nb=3' alt=''/>  </SplideSlide>
</Splide>

Basic Example

Basic splide example:

• 2 slides per page on large screen and a single slide on screen smaller than 640px. It makes use of breakpoint options as described in splidejs documentation,
• and log on the console on slide changes.

• 
• 
• 
• 
• 

Full code

Code Snippet

---
import "@splidejs/splide/css"
import { Splide, SplideSlide } from 'astro-splide';
import type { Splide as SplideInterface } from '@splidejs/splide'
---
<Splide
  options={ {
    perPage: 2,
    breakpoints: {
      640: {
        perPage: 1,
      },
    },
    rewind: true,
    gap: '1rem',
  } }
aria-labelledby="basic-example-heading"
onMoved={ (splide: SplideInterface, index: number, prev: number, dest: number) => {
  console.log('splide:', splide);
}}
>
  <SplideSlide> ...  </SplideSlide>
  <SplideSlide> ...  </SplideSlide>
  <SplideSlide> ...  </SplideSlide>
</Splide>

Autoplay Example

Play/Pause button, and options in the frontmatter.

• 
• 
• 
• 
• 

Play Pause

Full code

Code Snippet

---
// Splide configuration  -  require npm install astro-splide
import "@splidejs/splide/css"
import { Splide, SplideTrack, SplideSlide } from 'astro-splide';
import type { Options } from '@splidejs/splide';
const options: Options = {
  type         : 'loop',
  gap          : '1rem',
  autoplay     : true,
  pauseOnHover : false,
  resetProgress: false,
  height       : '15rem',
};
---
<Splide
  options={ options }
  aria-labelledby="autoplay-example-heading"
  hasTrack={ false }
>
  <SplideTrack>
    <SplideSlide> ...  </SplideSlide>
    <SplideSlide> ...  </SplideSlide>
    <SplideSlide> ...  </SplideSlide>
  </SplideTrack>

  <div class="splide__progress">
    <div class="splide__progress__bar" />
  </div>

  <button class="splide__toggle">
    <span class="splide__toggle__play">Play</span>
    <span class="splide__toggle__pause">Pause</span>
  </button>
</Splide>

Extension Example

Extension splide example: Uses @splidejs/splide-extension-auto-scroll extension.

Caution

There are some steps to take care of:

• This is your responsability to install https://splidejs.com/extensions/auto-scroll/

  npm install @splidejs/splide-extension-auto-scroll

• Note that <SplideExtension> is used instead of <Splide>
• Note that the script part must indicate which extension you are using
• Limitation: a single extension can be used per page

• 
• 
• 
• 
• 

Full code

Code Snippet

---
import "@splidejs/splide/css"
import { SplideExtension, SplideSlide } from 'astro-splide';
import type { Options } from '@splidejs/splide';
const options: Options = { ... }
---
<SplideExtension options={options}>
  <SplideSlide> ...  </SplideSlide>
  <SplideSlide> ...  </SplideSlide>
  <SplideSlide> ...  </SplideSlide>
</SplideExtension>

  <script>
    import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';
    import { initSplideExtension } from "astro-splide/js/splideExtensionUtils"
    initSplideExtension({AutoScroll})
  </script>