如何在 Vue 中制作水平缩略图可滚动旋转木马？

Question

I am trying to replicate this sort of a thumbnail container which is horizontal scrollable.

I have a GARMENTS button in my Vue.js Code that returns thumbnails as follows.

I am getting my thumbnails from the firebase storage and I want the carousel to look more like the first image with the horizontal scroll. What should I add to make it like so?

Here is the code for the Buttons Component:

<template>
<div class="gallery-container gallery-garments hide">
    <div v-for="gar in allGarments" :key="gar.id" class="gallery-item">
        <img :src="getImgUrl(gar.thumbnailLink)" height="150" width="100">
        <span style="display:block">{{gar.name}}</span>
    </div>
</div>
    <v-btn color="primary" v-on:click="toggleGallery('garments')">Garments</v-btn>
    <v-btn>Templates</v-btn>
    <v-btn>Download</v-btn>
    <v-btn>Share</v-btn>
</template>

<script>
export default {
    name: "Buttons",
    data () {
        return {
            garments: [],
        }
    },
    methods: {
        toggleGallery(type) {
            document.querySelectorAll(".gallery-container").forEach(el => {
                if (!el.classList.contains(`gallery-${type}`)) {
                    el.classList.add("hide")    
                }
            })
            document.querySelector(`.gallery-${type}`).classList.toggle("hide")
        },
        getImgUrl(url){ return url; }
    }
}
</script>

<style>

</style>

Answer 1

In your CSS, a good start would be:

.gallery-container {
  display: flex;
  flex-direction: row;
  height: 200px;
  overflow-x: scroll;
}

Demo:

 .gallery-item { display: inline-block; } .gallery-container { display: flex; flex-direction: row; height: 200px; overflow-x: scroll; }

 <div class="gallery-container gallery-garments hide"> <div class="gallery-item"> <img src="" height="150" width="100"> <span style="display:block">Name</span> </div> <div class="gallery-item"> <img src="" height="150" width="100"> <span style="display:block">Name</span> </div> <div class="gallery-item"> <img src="" height="150" width="100"> <span style="display:block">Name</span> </div> <div class="gallery-item"> <img src="" height="150" width="100"> <span style="display:block">Name</span> </div> <div class="gallery-item"> <img src="" height="150" width="100"> <span style="display:block">Name</span> </div> <div class="gallery-item"> <img src="" height="150" width="100"> <span style="display:block">Name</span> </div> <div class="gallery-item"> <img src="" height="150" width="100"> <span style="display:block">Name</span> </div> <div class="gallery-item"> <img src="" height="150" width="100"> <span style="display:block">Name</span> </div> </div>