@f_royen/giro NPM

Giro

Inspire by epic-slidy

Introduction

I make this plugin as an exercise to deepen my understanding and to try the NPM plugins. It is not intended to replace Slidy. If you are looking for something complete and reliable, just use Slidy.

Install

npm i @f_royen/giro

Example of use

Create an unordered list
Give it the class of your choice (or a ref = '...')
Then add some list items

> index.html


<ul class="giro">
  <li></li>
  <li></li>
  <li></li>
</ul>

I use GSAP because it's great and the timeline directly returns a promise when it resolves.
Create a transition
- You have access to the current element and to the next element.
- For the sake of simplicity, these are the indexes of the list items (starting with 0).
- As well as all the 'Giro' instance that will be created.
- Then return the GSAP timeline
Create the new instance of Giro, passing it the CSS selector or the ref, and then the options object you want (these are the values of the default options).
Finally, init Giro.

> main.js


import gsap from 'gsap'
import Giro from '@f_royen/giro'

const transition = (current, next, Giro) => {
  const space = 230 // Space between half of each slide
  const moveRange = (next - current) * space

  return gsap
    .timeline()
    .to(Giro.el, { duration: 0.6, ease: 'power4.out', x: `-=${moveRange}` })
}

const giro = new Giro('.giro', {
  classPrefix: 'giro',
  hasControls: true,
  hasNav: true,
  keyboard: true,
  swipe: true,
  transition,
})

giro.init()

Output

<div class="giro__outer">
  <ul class="giro">
    <li class="giro__item"></li>
    <li class="giro__item"></li>
    <li class="giro__item"></li>
  </ul>
  <ul class="giro__nav">
    <li class="giro__nav__item is-active">
      <button class="giro__nav__item__btn" disabled="true"></button>
    </li>
    <li class="giro__nav__item">
      <button class="giro__nav__item__btn"></button>
    </li>
    <li class="giro__nav__item">
      <button class="giro__nav__item__btn"></button>
    </li>
  </ul>
  <div class="giro__controls">
    <button class="giro__controls--prev" disabled="true">&lt;</button>
    <button class="giro__controls--next">&gt;</button>
  </div>
</div>