Switcher

Animations

Fade

  • Hello!
  • Hello again!
  • Bazinga!

Slide Bottom

  • Hello!
  • Hello again!
  • Bazinga!

Slide Left

  • Hello!
  • Hello again!
  • Bazinga!

Slide Right

  • Hello!
  • Hello again!
  • Bazinga!

Slide Horiontal

  • Hello!
  • Hello again!
  • Bazinga!

Slide Vertical

  • Hello!
  • Hello again!
  • Bazinga!

Slide Left Small

  • Hello!
  • Hello again!
  • Bazinga!

Slide Right Small

  • Hello!
  • Hello again!
  • Bazinga!

Other Components

Tab Left

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tab Right

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button

Link

  • Hello!
  • Hello again!
  • Bazinga!

Button Group

Link

  • Hello!
  • Hello again!
  • Bazinga!

Nav

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Subnav Pill

  • Hello!
  • Hello again!
  • Bazinga!

JavaScript Options

Option Value Default Description
connect CSS selector ~.gls-switcher Related items container. By default, succeeding elements with class 'gls-switcher'.
toggle CSS selector > * > :first-child Toggle selector - triggers content switching on click.
itemNav CSS selector false Related nav container. By default, nav items are found in related item's container only.
active Number 0 Active index on init. (Providing a negative number indicates a position starting from the end of the set)
animation String false Space-separated names of animations. Comma-separated for animation out.
duration Number 200 The animation duration.
swiping Boolean true Use swiping.