Learn Cycle2 for jQuery From Top to Bottom

2.7 Using Non-Image Slides

Cycle allows you to use any kind of elements for slides, by default it looks for images but you can specify to look for these lists, anchor tags and so on. So let's find out how. Let's say that we wanna use some text on each slide and each slide will be a div something like this. So we have a div, we have an h1 and a paragraph and then another div inside, the first one. Now we do have the class of cycle-slideshow. But even with that we don't actually have a working slider, and that's because by default, for slides Cycle searches for images. So we need to specify that we wanna use a different element. We do that by setting the following option data-cycle-slides="div", all right? So now we're gonna have the first slide, and then the second slide, and then the third, and then the fourth. But notice that this div here was considered a slide even though it was inside our first div, so if we just want like the main divs here, the first level divs. We're just gonna do this and specify that we just want the direct descendants. So now we will just have one, two and three. That's all there is to it, it's really, really simple. Now to this, you would add whatever options you want just like you would a regular image slide show. So for example, you can change the effect you can say data-cycle-fx="scrollHorz". And now it's gonna scroll instead of fade, and there we go. You can add pagers if you want, you can add captions, overlays and so on. One thing that I wanna show you here is actually two additional options that you can use. The first one is called data-cycle-slide-class because currently, if we take a look at our slides here, they have the class of cycle-slide. And on the active one they have the class of cycle-slide-active. Well we can tweak these to your liking. Let's say for example my-slide here and you can also data-cycle-slide-active-class my-active-slide, for example. And then you can specify some CSS for these and, as you can see now they have the classes my-slide and my-active-slide. And that is a very simple example of using non-image slides. With this we've finished the lesson and in fact the the basic usage chapter. Now it's time to dive a little deeper and learn some of the more advanced functionality that Cycle has to offer. And it will begin in the next lesson with auto-height.