Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Carousels
We can add carousels into our Vue app with the q-carousel component.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-carousel
v-model="slide"
transition-prev="slide-right"
transition-next="slide-left"
animated
control-color="primary"
class="rounded-borders"
>
<q-carousel-slide name="style" class="column no-wrap flex-center">
<q-icon name="style" color="primary" size="56px"></q-icon>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="tv" class="column no-wrap flex-center">
<q-icon name="live_tv" color="primary" size="56px"></q-icon>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="layers" class="column no-wrap flex-center">
<q-icon name="layers" color="primary" size="56px"></q-icon>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="map" class="column no-wrap flex-center">
<q-icon name="terrain" color="primary" size="56px"></q-icon>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
</q-carousel>
<div class="row justify-center">
<q-btn-toggle
glossy
v-model="slide"
:options="[
{ label: 1, value: 'style' },
{ label: 2, value: 'tv' },
{ label: 3, value: 'layers' },
{ label: 4, value: 'map' }
]"
></q-btn-toggle>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
slide: "style",
lorem: "Lorem ipsum dolor"
}
});
</script>
</body>
</html>
We add the q-carousel component to add the carousel.
Then we add the q-carousel-slide inside it to add the slides.
The q-btn-toggle lets us add buttons to go to the slides by clicking the buttons.
options has an array of items to set the slide value to the value of the value property.
Slide Transitions
We can set the slide transitions by using the transition-prev and transition-next props to set the transition effect for going to the previous and next slides respectively.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-carousel
v-model="slide"
transition-prev="scale"
transition-next="scale"
swipeable
animated
control-color="white"
navigation
padding
arrows
height="300px"
class="bg-primary text-white shadow-1 rounded-borders"
>
<q-carousel-slide name="style" class="column no-wrap flex-center">
<q-icon name="style" size="56px" ></q-icon>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="tv" class="column no-wrap flex-center">
<q-icon name="live_tv" size="56px" ></q-icon>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="layers" class="column no-wrap flex-center">
<q-icon name="layers" size="56px" ></q-icon>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
<q-carousel-slide name="map" class="column no-wrap flex-center">
<q-icon name="terrain" size="56px" ></q-icon>
<div class="q-mt-md text-center">
{{ lorem }}
</div>
</q-carousel-slide>
</q-carousel>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
slide: "style",
lorem: "Lorem ipsum dolor"
}
});
</script>
</body>
</html>
We also add the animated prop to enable animation.
arrows add the arrows for navigation.
swipeable makes the carousel swipeable.
Conclusion
We can add carousels with Quasar’s q-carousel component into our Vue app.
