Carousel.vue example from Laracasts.
| <template> | |
| <div> | |
| <slot></slot> | |
| </div> | |
| </template> | |
| <script> | |
| import Flickity from 'flickity'; | |
| import 'flickity/dist/flickity.min.css'; | |
| export default { | |
| props: { | |
| wrapAround: { default: true }, | |
| autoPlay: { default: false } | |
| }, | |
| mounted() { | |
| new Flickity(this.$el, { | |
| wrapAround: this.wrapAround, | |
| autoPlay: this.autoPlay, | |
| cellAlign: 'left', | |
| contain: true | |
| }); | |
| } | |
| }; | |
| </script> |
| <!doctype html> | |
| <html lang="{{ app()->getLocale() }}"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Example</title> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <carousel> | |
| <img src="https://placeimg.com/640/480/any"> | |
| <img src="https://placeimg.com/640/480/any?2"> | |
| <img src="https://placeimg.com/640/480/any?3"> | |
| <img src="https://placeimg.com/640/480/any?4"> | |
| <img src="https://placeimg.com/640/480/any?5"> | |
| </carousel> | |
| </div> | |
| <script src="/js/app.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
hmmm