Иван Лихоманов

Удаляй костыль(vuefire).

В main.js

import firebase from 'firebase/app'
import 'firebase/firestore'

firebase.initializeApp({
    apiKey: "****************",
    authDomain: "****************",
    databaseURL: "****************",
    projectId: "****************",
    storageBucket: "****************",
    messagingSenderId: "****************",
    appId: "****************",
    measurementId: "****************",
});
export const db = firebase.firestore();

Компонент VUE:

import firebase from 'firebase/app';
import 'firebase/auth';
import {db} from '../main'

    export default {
        name: 'component-name',
        data() {
            return {
                loading: false
            }
        },
        methods: {
            fetchList() {
            this.loading = true;
            db.collection("collectionName").get()
                .then(function (querySnapshot) {
                    let list = {};
                    if (querySnapshot) {
                        querySnapshot.forEach(function (doc) {
                            // console.log(doc.id, " => ", doc.data());
                            list[doc.id] = doc.data();
                        });
                    }
                    console.log('Результат: ', list)
                })
                .catch(function (error) {
                    console.log("Error getting documents: ", error);
                }).finally(() => {
                this.loading = false;
            });
        },
        },
        mounted() {
           this.fetchList();
        }
    }

Сделать самому новичку будет не просто, а опытный зачастую и не будет делать(по тому что знает какой это гемморой),а найдет библиотеку и допилит под себя.
Из слайдеров изображений на JS лучший на мой взгляд swiperjs: https://swiperjs.com/demos/
Кастомизировать можно как угодно + поддержка мобильников "из коробки"