x-slidebox

« Back to docs

An <x-slidebox> is similar to an <x-deck>, in that it can slide between different slides of content.

However, the main difference is that <x-slidebox> treats the slides as a coherent filmstrip instead of as independent cards, so transitioning from one slide to another displays all slides in between during the animation.

Basic usage

Slide 0 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6

Markup

<x-slidebox>
<x-slides>
<x-slide>Slide 0</x-slide>
<x-slide>Slide 1</x-slide>
<x-slide>Slide 2</x-slide>
<x-slide>Slide 3</x-slide>
<x-slide>Slide 4</x-slide>
<x-slide>Slide 5</x-slide>
<x-slide>Slide 6</x-slide>
</x-slides>
</x-slidebox>

JavaScript

// assume prevButton, nextButton, slideToButton,
// and slideBox are already defined as their
// respective DOM elements

// go back a slide
prevButton.addEventListener("click", function(){
slidebox.slidePrevious();
});

// go forward a slide
nextButton.addEventListener("click", function(){
slidebox.slideNext();
});

// jump to slide 6
slideToButton.addEventListener("click", function(){
slidebox.slideTo(6);
});
Top

Changing Slide Direction with orientation

To change whethe the slidebox slides horizontally or vertically, edit the orientation attribute of the <x-slidebox>.

Valid options: "x", "y"

Slide 0 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6

Markup

<x-slidebox>
<x-slides>
<x-slide>Slide 0</x-slide>
<x-slide>Slide 1</x-slide>
<x-slide>Slide 2</x-slide>
<x-slide>Slide 3</x-slide>
<x-slide>Slide 4</x-slide>
<x-slide>Slide 5</x-slide>
<x-slide>Slide 6</x-slide>
</x-slides>
</x-slidebox>
Top