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 ~.uk-switcher Related items container. By default succeeding elements with class 'uk-switcher'.
toggle CSS selector > * > :first-child Toggle selector - triggers content switching on click.
active Number 0 Active index on init. (Providing a negative number indicates a position starting from the end of the set)
animation String false The space separated names of animations to use. (Comma separate for animation out)
duration Number 200 The animation duration.
swiping Boolean true Use swiping.