Svelte Glider

A Svelte wrapper for Glider.js

npm logo GitHub logo

Usage


<script lang="ts">
  import Glider from '@warren-bank/svelte-glider'

  import 'glider-js/glider.min.css'
  import '@warren-bank/svelte-glider/glider.defaults.css'
</script>

<Glider
  class="gradient-outline hide-scrollbar"
  draggable
  hasArrows
  hasDots
  slidesToShow={2}
  slidesToScroll={1}
>
  <div class="slide"><h1>1</h1></div>
  <div class="slide"><h1>2</h1></div>
  <div class="slide"><h1>3</h1></div>
  <div class="slide"><h1>4</h1></div>
  <div class="slide"><h1>5</h1></div>
  <div class="slide"><h1>6</h1></div>
  <div class="slide"><h1>7</h1></div>
  <div class="slide"><h1>8</h1></div>
  <div class="slide"><h1>9</h1></div>
  <div class="slide"><h1>10</h1></div>
  <div class="slide"><h1>11</h1></div>
  <div class="slide"><h1>12</h1></div>
</Glider>

Demos

Multiple Items

1
2
3
4
5
6
7
8
9
10
11
12

Single Item with Scroll Lock

1
2
3
4
5
6
7
8
9
10
11
12

Responsive Glider

1
2
3
4
5
6
7
8
9
10
11
12

Autoplay Glider

1
2
3
4
5
6
7
8
9
10
11
12

Updating Props

Number of slides:
1
2
3
4
5
6
7
8
9
10
11
12

Glider.js instance methods

1
2
3
4
5
6
7
8
9
10
11
12

Perspective View

1
2
3
4
5
6
7
8
9
10
11
12

Scroll to slide #5

1
2
3
4
5
6
7
8
9
10
11
12

Fractional Slides

1
2
3
4
5
6
7
8
9
10
11
12

Custom Events

1
2
3
4
5
6
7
8
9
10
11
12

Custom Element Arrows (w/ named slots)

1
2
3
4
5
6
7
8
9
10
11
12

Skip Track

1
2
3
4
5
6
7
8
9
10
11
12

Dynamic Data

84
37
54
47
92