x-slidebox
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 To change whethe the slidebox slides horizontally or vertically, edit the Valid options: <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
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);
});Changing Slide Direction with
orientation
orientation
attribute of the <x-slidebox>
."x"
, "y"
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>