使用键盘的左右方向键来控制幻灯片Slide 2
Use defaults
bespoke.horizontal.from('article', {
fx: true
});
bespoke-fxSlide 3
Custom global options
bespoke.horizontal.from('article', {
fx: {
direction: "horizontal",
transition: "move",
reverse: false
}
});
bespoke-fxSlide 4
Set per slide options
<section>Slide 4</section>
bespoke-fxSlide 5
Direction: horizontal or vertical
<section data-bespoke-fx-direction="vertical">Slide 5</section>
bespoke-fxSlide 6
Run transition in reverse
<section data-bespoke-fx-reverse="true">Slide 6</section>
bespoke-fxSlide 7
Different transitions: move [default]
<section data-bespoke-fx-transition="move">Slide 7</section>
bespoke-fxSlide 8
Different transitions: move-fade
<section data-bespoke-fx-transition="move-fade">Slide 8</section>
bespoke-fxSlide 9
Different transitions: move-both-fade
<section data-bespoke-fx-transition="move-both-fade">Slide 9</section>
bespoke-fxSlide 10
Different transitions: move-different-easing
<section data-bespoke-fx-transition="move-different-easing">Slide 10</section>
bespoke-fxSlide 11
Different transitions: scale-down-out-move-in
<section data-bespoke-fx-transition="scale-down-out-move-in">Slide 11</section>
bespoke-fxSlide 12
Different transitions: move-out-scale-up
<section data-bespoke-fx-transition="move-out-scale-up">Slide 12</section>
bespoke-fxSlide 13
Different transitions: scale-up-up
<section data-bespoke-fx-transition="scale-up-up">Slide 13</section>
bespoke-fxSlide 14
Different transitions: scale-down-up
<section data-bespoke-fx-transition="scale-down-up">Slide 14</section>
bespoke-fxSlide 15
Different transitions: glue
<section data-bespoke-fx-transition="glue">Slide 15</section>
bespoke-fxSlide 16
Different transitions: flip
<section data-bespoke-fx-transition="flip">Slide 16</section>
bespoke-fxSlide 17
Different transitions: fall
<section data-bespoke-fx-transition="fall">Slide 17</section>
bespoke-fxSlide 18
Different transitions: newspaper
<section data-bespoke-fx-transition="newspaper">Slide 18</section>
bespoke-fxSlide 19
Different transitions: push
<section data-bespoke-fx-transition="push">Slide 19</section>
bespoke-fxSlide 20
Different transitions: pull
<section data-bespoke-fx-transition="pull">Slide 20</section>
bespoke-fxSlide 21
Different transitions: fold
<section data-bespoke-fx-transition="fold">Slide 21</section>
bespoke-fxSlide 22
Different transitions: unfold
<section data-bespoke-fx-transition="unfold">Slide 22</section>
bespoke-fxSlide 23
Different transitions: room
<section data-bespoke-fx-transition="room">Slide 23</section>
bespoke-fxSlide 24
Different transitions: cube
<section data-bespoke-fx-transition="cube">Slide 24</section>
bespoke-fxSlide 25
Different transitions: carousel
<section data-bespoke-fx-transition="carousel">Slide 25</section>
bespoke-fxSlide 26
Different transitions: sides
<section data-bespoke-fx-transition="sides">Slide 26</section>
bespoke-fxSlide 27
Different transitions: slide
<section data-bespoke-fx-transition="slide">Slide 27</section>