Ya no tienes que investigar más por todo internet ya que estás al lugar perfecto, contamos con la solución que buscas y sin problema.
Solución:
Si desea un control más detallado sobre el aspecto y la funcionalidad de su carrusel (toque, velocidad, impulso, número de imágenes por diapositiva, comportamiento receptivo…) y no quiere implementarlo desde cero, le recomiendo usa Vue-Awesome-Swiper como complemento de Vue y se mantiene alejado de Vuetify cuando se trata de carruseles y galerías de imágenes, al menos hasta que esté más completo en ese sentido.
Vue-Awesome-Swiper en un envoltorio delgado de vue alrededor de la poderosa biblioteca Swiper.js que es, según las propias palabras de los desarrolladores:
El deslizador táctil móvil más moderno con transiciones aceleradas por hardware
Aquí está la captura de pantalla de un carrusel con múltiples imágenes:
(Demostración de Codepen)
y aquí está la captura de pantalla de una galería de imágenes con los pulgares:
(Demostración de Codepen)
Aquí hay un fragmento de código para la primera captura de pantalla:
Vue.use(VueAwesomeSwiper);
new Vue(
el: "#app",
data: () => (
swiperSlides: [
"pink",
"red",
"yellow",
"purple",
"green",
"orange",
"blue"
],
swiperOption:
initialSlide: 0,
slidesPerView: 4,
spaceBetween: 20,
freeMode: true,
watchOverflow: true,
breakpoints:
1904:
slidesPerView: 4,
spaceBetween: 20
,
1264:
slidesPerView: 4,
spaceBetween: 20
,
960:
slidesPerView: 4,
spaceBetween: 50
,
600:
slidesPerView: 3,
spaceBetween: 150
,
400:
slidesPerView: 2,
spaceBetween: 150
,
pagination:
el: ".swiper-pagination",
clickable: true
,
navigation:
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
),
computed:
swiper()
return this.$refs.mySwiper.swiper;
,
mounted()
// current swiper instance
this.swiper.slideTo(3, 1000, false);
,
methods:
callback()
//read the API docs to see which slider events are available
);
Si está utilizando vue-cli, importe Vue-Awesome-Swiper en su archivo js principal y regístrelo como un complemento de Vue, como lo haría con Vuetify:
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
Vue.use(VueAwesomeSwiper);
Espero que ayude.
Encontré la siguiente solución:
![]()
Pero desplaza un grupo de imágenes a la vez. Ver el manifestación.
ACTUALIZAR: Puede usar Vue2-Siema, que es un contenedor de Vue 2 para Siema, una biblioteca de carrusel liviana. Ver el manifestación.
valoraciones y reseñas
Si sostienes alguna vacilación y disposición de beneficiar nuestro enunciado puedes escribir una apostilla y con deseo lo observaremos.