Image Gallery     

All Components below are responsive. They accommodate to the width of their container.

Responsive Images

Just add the responsive CSS class to it.

<img src="assets/quasar.jpg" class="responsive">

Avatar Images

Just add the avatar CSS class to it.

<img src="assets/q-avatar.jpg" class="avatar">

Use this Web Component when you want to display multiple images together.

<q-gallery :src="gallery"></q-gallery>
<!-- With infinite scrolling and autoplay and dots and fullscreen -->
<q-gallery infinite autoplay dots fullscreen :src="gallery"></q-gallery>

Vue Properties

PropertyTypeDescription
srcArrayStrings represting URLs. Use images from statics folder.
infiniteBooleanInfinite slides scrolling
autoplayBoolean/NumberAuto scrolls between slides. Works great along infinite prop (but infinite is not required). If used as a number, it represents the number of milliseconds between scrolls.
arrowsBooleanShow arrows
dotsBooleanShow dots at bottom
fullscreenBooleanShows Fullscreen button
actionsBooleanShow Actions slot

When the real estate of the Page is an issue, use this Web Component which displays multiple images using a Slider Component. Read more about Sliders here.

Gallery Slider has two control buttons available: one which when clicked displays a list of thumbnails of all images in the gallery, and the other which can bring the slider to fullscreen.

User can switch between images using the arrow buttons or through swipe actions. When on desktop, user can also drag on images to left or right.

<!-- Template for VueModel below -->
<q-gallery-slider :src="gallery"></q-gallery-slider>

Vue Properties

PropertyTypeDescription
srcArrayStrings represting URLs. Use images from statics folder.

Vue Methods

PropertyDescription
toggleQuickView()Toggle thumbnails view.
goToSlide(Number index, Boolean animation)Go to a certain slide number (with animation or not).

Vue Events

PropertyDescription
@slide(slideNumber)Triggered when slide number changes.