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>
<script>
methods: {
swipeHandler (direction) {
if(direction == 'left'){
this.$refs.photoFrame.next();
}
if(direction == 'right'){
this.$refs.photoFrame.prev();
}
},
</script>
ソースはコピペじゃ動かんけど、さっしてちょ
Author And Source
この問題について(element ui carousel swipe), 我々は、より多くの情報をここで見つけました https://qiita.com/ma7ma7pipipi/items/bda0314f668b8ca54bf2著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .