A viewUseUtility function that I found particularly intriguing was the useCycleList composable. It takes an array and returns a state variable that represents the current item, and a prev and next function to cycle through each item one at a time. The URLs that I have pre-populated here are just some royalty-free images from Pixabay that I've run through a URL shortener to make it easier to read. Now, if we provide the state as the source on an image tag, then we can see the first image rendered to the page.
And let's just give it a width of 100% so that we can see the whole thing. With the prev and next function already available from view use, we can now easily provide buttons to cycle through the different images. Awesome! With only 22 lines of code, none of which included any confusing logic.
We've been able to create a simple image carousel. If you've ever tried to code an image carousel from scratch, let me go ahead and tell you that the simplicity of this is amazing. But I think we can take it up another level. Let's give it a nice fade transition between images.
To do that, I'll wrap the image tag in a transition element. 2 seconds. and transition its opacity. js docs.
Next, we'll need to position the images absolutely so that they can sit on top of one another so that the fade effect works properly. I'll also define a specific height so that any variation in image size doesn't cause the page to jump. And I'll use Object Fit to make the images cover the full width and height, without any stretching. Lastly, we'll want to wrap the image in a div with the class of carousel.
This will allow us to position the image relative to the carousel div, and preserve the height needed on the page so that the buttons correctly display below the images. Right, if we try things out now, you might be a little disappointed. Yeah, no nice transition yet. That's because right now, Vue is using the in-place patch strategy.
in order to change out the source attribute of our image tag. We need view to destroy the image tag completely and switch it out with a new one so that there can be a transition between the two. We can tell view to do this by providing the key attribute with the value of the current state. This tells view that each state deserves its own unique image element.
This time the images change out smoothly. Awesome! All this is pretty cool, but let's take it up still a notch further in the next lesson. Plus, learn how to extend if you use Composable to include custom states.
A viewUseUtility function that I found particularly intriguing was the useCycleList composable. It takes an array and returns a state variable that represents the current item, and a prev and next function to cycle through each item one at a time. The URLs that I have pre-populated here are just some royalty-free images from Pixabay that I've run through a URL shortener to make it easier to read. Now, if we provide the state as the source on an image tag, then we can see the first image rendered to the page.
And let's just give it a width of 100% so that we can see the whole thing. With the prev and next function already available from view use, we can now easily provide buttons to cycle through the different images. Awesome! With only 22 lines of code, none of which included any confusing logic.
We've been able to create a simple image carousel. If you've ever tried to code an image carousel from scratch, let me go ahead and tell you that the simplicity of this is amazing. But I think we can take it up another level. Let's give it a nice fade transition between images.
To do that, I'll wrap the image tag in a transition element. 2 seconds. and transition its opacity. js docs.
Next, we'll need to position the images absolutely so that they can sit on top of one another so that the fade effect works properly. I'll also define a specific height so that any variation in image size doesn't cause the page to jump. And I'll use Object Fit to make the images cover the full width and height, without any stretching. Lastly, we'll want to wrap the image in a div with the class of carousel.
This will allow us to position the image relative to the carousel div, and preserve the height needed on the page so that the buttons correctly display below the images. Right, if we try things out now, you might be a little disappointed. Yeah, no nice transition yet. That's because right now, Vue is using the in-place patch strategy.
in order to change out the source attribute of our image tag. We need view to destroy the image tag completely and switch it out with a new one so that there can be a transition between the two. We can tell view to do this by providing the key attribute with the value of the current state. This tells view that each state deserves its own unique image element.
This time the images change out smoothly. Awesome! All this is pretty cool, but let's take it up still a notch further in the next lesson. Plus, learn how to extend if you use Composable to include custom states.