Developing Vue Apps with the Quasar Library — Carousels

Image for post
Image for post
Photo by sept commercial on Unsplash

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.

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store