element ui carousel swipe

スライドショーってさ、スワイプでやりたいがね。
だからスワイプにできるようにと、ついでにレスポンシブ化しとくがね。

あー。んでもって一枚目だけ早めに読み込んでちょ。
2,3枚目だけ lazyload でええぇがね。

必要なライブラリ

・vue2-touch-events
・element ui
・VueLazyload

まずはこれで img タグを レスポンシブにしとく。

<style>

    img.responsive {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }

</style>

template.vue

<div v-touch:swipe="swipeHandler">
    <el-carousel ref="photoFrame" :autoplay="false">
        <el-carousel-item v-for="(v,key) in data.photos" :key="key">
            <img v-if="key == 0" class="responsive" :src="'/gcp_storage/photo_300x300_' + v.id + '.jpg'">
            <img v-else class="responsive" v-lazy="'/gcp_storage/photo_300x300_' + v.id + '.jpg'">
        </el-carousel-item>
    </el-carousel>
</div>

.js

<script>
    methods: {

        swipeHandler (direction) {

            if(direction == 'left'){
                this.$refs.photoFrame.next();
            }

            if(direction == 'right'){
                this.$refs.photoFrame.prev();
            }

        },
        
</script>

ソースはコピペじゃ動かんけど、さっしてちょ