Categories
Quasar

Developing Vue Apps with the Quasar Library — Image and Video Carousels

Spread the love

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.

Carousel with Image Captions

We can add carousels with image captions.

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"
    />
    <style>
      .custom-caption {
        text-align: center;
        padding: 12px;
        color: white;
        background-color: rgba(0, 0, 0, 0.3);
      }
    </style>
  </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 arrows animated v-model="slide" height="400px">
          <q-carousel-slide
            name="first"
            img-src="https://cdn.quasar.dev/img/mountains.jpg"
          >
            <div class="absolute-bottom custom-caption">
              <div class="text-h2">First stop</div>
              <div class="text-subtitle1">Mountains</div>
            </div>
          </q-carousel-slide>
          <q-carousel-slide
            name="second"
            img-src="https://cdn.quasar.dev/img/parallax1.jpg"
          >
            <div class="absolute-bottom custom-caption">
              <div class="text-h2">Second stop</div>
              <div class="text-subtitle1">City</div>
            </div>
          </q-carousel-slide>
          <q-carousel-slide
            name="third"
            img-src="https://cdn.quasar.dev/img/parallax2.jpg"
          >
            <div class="absolute-bottom custom-caption">
              <div class="text-h2">Third stop</div>
              <div class="text-subtitle1">Bridge</div>
            </div>
          </q-carousel-slide>
        </q-carousel>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          slide: "first"
        }
      });
    </script>
  </body>
</html>

We add the div with the absolute-bottom class to add the text to the bottom of the slide.

Video Slides

We can add sides with video with the q-video 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" infinite>
          <q-carousel-slide name="dog1">
            <q-video
              class="absolute-full"
              src="https://www.youtube.com/embed/uhXH7W5ESRc"
            >
            </q-video>
          </q-carousel-slide>

          <q-carousel-slide name="dog2">
            <q-video
              class="absolute-full"
              src="https://www.youtube.com/embed/1HygThMLzGs"
            >
            </q-video>
          </q-carousel-slide>

          <q-carousel-slide name="dog3">
            <q-video
              class="absolute-full"
              src="https://www.youtube.com/embed/AcL0MeVZIxM"
            >
            </q-video>
          </q-carousel-slide>
        </q-carousel>

        <div class="row justify-center">
          <q-btn-toggle
            glossy
            v-model="slide"
            :options="[
                { label: 'Dog 1', value: 'dog1' },
                { label: 'Dog 2', value: 'dog2' },
                { label: 'Dog 3', value: 'dog3' }
              ]"
          />
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          slide: "dog1"
        }
      });
    </script>
  </body>
</html>

We add the q-video into the q-carousel-slide to add the video into the slide.

Slides with Thumbnails

To add photo carousels with thumbnails,. we can add the thumbnails 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://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 swipeable animated v-model="slide" thumbnails 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>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          slide: 1
        }
      });
    </script>
  </body>
</html>

Conclusion

We can add various kinds of carousels easily into our Vue app with Quasar.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *