Learn Cycle2 for jQuery From Top to Bottom

4.3 ScrollVert and Tile

The final two transition plugins you'll be working with are called scrollVert and tiles. So let's go ahead and download these and see what they're all about. We'll begin as usual by loading these two plugins in the footer of our page. So we're getting the scrollVert JS and tile JS. Now, the scrollVert is the easiest of all. data-cycle-fx to scrollVert, and now the items will scroll vertically instead of horizontally. And there we go. For tile, let's go ahead and build another slide show here. And to this, we've added some custom navigation buttons, and the controls here, and of course some CSS for them. So now currently our second slider looks like this. Right, next, next, next. But this is still using the scrollVert effect. Let's change this to tile. And this is actually called tileSlide. And now. This is the effect you're getting. Now, this seems to be a bit bugged. Noticed there is a little flicker on some changes. Not sure why that is, but it's just the way it is, yeah. And with this new effect come a lot of options. For example, you can set the tiles to be horizontal instead of vertical. So for this you would set data-cycle-tile-vertical to false. So now the tiles will be horizontal. You can also set the tile count. By default it's seven. We can set it to 2, for example, and it's was gonna look like that. Or we can set it to 20. And it's gonna look like that. A very nice feature for this plugin is its ability to create per-slide effects. So per-slide, you can customize the effect, either you want it to be a slide or a blind. You can customize the tile count. And you can customize the tile delay. Back here, let's say that for this first image, we're gonna set the data-cycle-fx to tileSlide, we're gonna set the tile count to 3, and on this second slide, we're gonna set this to tileBlind. And the tile count will be 5, and let's actually put a tile delay of let's say 100 here. Yeah, so let's see how it looks. Okay, that was the blind. And we actually need to go previous, and there it is. That's it for the transition plugins. Now, as you saw, these will just add a simple transition effects to the slides, they don't have any additional function. However, there are four more plugins we need to cover that add some extra functionality to Cycle. So let's start in the next lesson.