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.
Vertical Carousel
We can make a carousel vertical with the vertical prop:
<!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://use.fontawesome.com/releases/v5.0.13/css/all.css"
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"
vertical
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"
}
});
</script>
</body>
</html>
Image Carousel
We can add image slides by setting the img-src prop to the q-carousel-slide 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 animated v-model="slide" arrows navigation infinite>
<q-carousel-slide
:name="1"
img-src="https://cdn.quasar.dev/img/mountains.jpg"
></q-carousel-slide>
<q-carousel-slide
:name="2"
img-src="https://cdn.quasar.dev/img/parallax1.jpg"
></q-carousel-slide>
<q-carousel-slide
:name="3"
img-src="https://cdn.quasar.dev/img/parallax2.jpg"
></q-carousel-slide>
<q-carousel-slide
:name="4"
img-src="https://cdn.quasar.dev/img/quasar.jpg"
></q-carousel-slide>
</q-carousel>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
slide: 1
}
});
</script>
</body>
</html>
We can also add multi-image slides with the q-img components.
For example, 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 animated v-model="slide" arrows navigation infinite>
<q-carousel-slide :name="1" class="column no-wrap">
<div
class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap"
>
<q-img
class="rounded-borders col-6 full-height"
src="https://i.picsum.photos/id/1/500/500.jpg?hmac=6vo7WkHURh9CWfdf144ASqEaPNcbj2PHJK3UgGH24lM"
>
</q-img>
<q-img
class="rounded-borders col-6 full-height"
src="https://cdn.quasar.dev/img/parallax1.jpg"
>
</q-img>
</div>
</q-carousel-slide>
<q-carousel-slide :name="2" class="column no-wrap">
<div
class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap"
>
<q-img
class="rounded-borders col-6 full-height"
src="https://i.picsum.photos/id/2/500/500.jpg?hmac=vAjkLR4Y91mPCNgWRVLc2dF_fuBnLtQTdj9gHrBZz2M"
>
</q-img>
<q-img
class="rounded-borders col-6 full-height"
src="https://cdn.quasar.dev/img/quasar.jpg"
>
</q-img>
</div>
</q-carousel-slide>
<q-carousel-slide :name="3" class="column no-wrap">
<div
class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap"
>
<q-img
class="rounded-borders col-6 full-height"
src="https://cdn.quasar.dev/img/cat.jpg"
>
</q-img>
<q-img
class="rounded-borders col-6 full-height"
src="https://cdn.quasar.dev/img/linux-avatar.png"
>
</q-img>
</div>
</q-carousel-slide>
<q-carousel-slide :name="4" class="column no-wrap">
<div
class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap"
>
<q-img
class="rounded-borders col-6 full-height"
src="https://cdn.quasar.dev/img/material.png"
>
</q-img>
<q-img
class="rounded-borders col-6 full-height"
src="https://cdn.quasar.dev/img/donuts.png"
>
</q-img>
</div>
</q-carousel-slide>
</q-carousel>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
slide: 1
}
});
</script>
</body>
</html>
We change the image size with the col-6 class.
Conclusion
We can customize Quasar carousels in our Vue app.
