x-tag / slidebox

A container that allows animated transitions between content panes. Slide Box supports horizontal and vertical transitions.

Install

Requirements

Node / NPM

Bower (Package Manager)

npm install bower -g

Inside your project run:

bower install x-tag-slidebox

This downloads the component and dependencies to ./components

Syntax

Slidebox allows you to create slides of any content and then transition between them. It supports x and y axis transitions.

<x-slidebox>
  <x-slide><img src="demo/birnimal-calendar.png" /></x-slide>
  <x-slide><img src="demo/birnimal-graph.png" /></x-slide>
  <x-slide><img src="demo/birnimal-detail.png" /></x-slide>
  <x-slide><img src="demo/birnimal-settings.png" /></x-slide>
</x-slidebox>

Events

slideselected is fired when a new slide is selected, before it is visually shown.

  document.getElementsByTagName('x-slidebox')[0].addEventListener('slideselected', function(e){
    // e.detail.lastSlide <-- access the last selected slide
  });

Usage

  var slidebox = document.getElementsByTagName('x-slidebox')[0];
  slidebox.slideNext();
  slidebox.slidePrevious();
  slidebox.slideTo(2); // index of desired x-slide