https://i.sstatic.net/yTONv.jpg
Greetings, I am currently utilizing the "carousel" component from Buefy with Vue.js. In desktop resolution, I need to display 3 elements, but on mobile devices, I want only one article to be visible. I have created a function that adjusts the property of the carousel called "elements to show" based on the screen resolution, changing it from 3 to 1. However, the issue is that this property is loaded when the page initializes and does not dynamically adjust when the screen size changes.
Can anyone provide insights or guidance on how to achieve this goal? Ideally, I would like to avoid having to refresh the entire page, but instead, maybe just reloading the specific component.
<b-carousel-list v-model="test" :data="items" :items-to-show="valor" :items-to-list="3" icon-size="is-large">
<template slot="item" slot-scope="props">
<div class="card redondo">
<div class="card-image">
<figure class="image is-5by4">
<a @click="info(props.index)"><img :src="props.list.image" class="imagen-redondo"></a>
</figure>
methods: {
info(value) {
this.test = value
},
cambiar() {
return this.test = 0;
},
itemMostrar() {
if ($(window).width() < 720) {
return this.valor = 1;
} else {
return this.valor = 3;
}
},
},