0
316
Viewsvue: cómo hacer un espacio entre los elementos flexibles en Slick-carousel
Este es mi Carrusel Slick actual.
Hay 4 elementos seguidos y quiero agregar un margen entre cada elemento sin cambiar la aspect-ratio: 1.3/1;
Encuentro que tengo dificultades para anular las clases vue-slick-carousel . ¿Alguien sabe cómo hacerlo?
HolaMundo.vue
<template> <div class="slick"> <VueSlickCarousel v-bind="{ arrow: true, focusOnSelect: true, speed: 500, slidesToShow: 4, slidesToScroll: 4, touchThreshold: 5, }" > <div class="slick-item">1</div> <div class="slick-item">2</div> <div class="slick-item">3</div> <div class="slick-item">4</div> <div class="slick-item">5</div> <div class="slick-item">6</div> <template #prevArrow=""> <button class="arrow-btn"> <img src="@/assets/images/common/arrow-right.svg" alt="arrow-left" /> </button> </template> <template #nextArrow=""> <button class="arrow-btn"> <img src="@/assets/images/common/arrow-right.svg" alt="arrow-left" /> </button> </template> </VueSlickCarousel> </div> </template> <script> import VueSlickCarousel from "vue-slick-carousel"; import "vue-slick-carousel/dist/vue-slick-carousel.css"; export default { components: { VueSlickCarousel }, }; </script> <style scoped lang="scss"> // override default class .slick-slider { display: flex; align-items: center; border: 1px solid grey; } .slick-item { aspect-ratio: 1.3/1; max-width: 280px; margin-left: 10px; background-color: #e5e5e5; } .arrow-btn { border: none; img { height: 40px; } } </style> Códigosycaja:
https://codesandbox.io/s/empty-leftpad-ti367?file=/src/components/HelloWorld.vue
1 answers
Answer question0
Si observa losejemplos en el paquete npm , el espacio entre las diapositivas se logra envolviendo cada diapositiva con un elemento <div> adicional y luego agregando márgenes al interior.
Su mejor apuesta es actualizar su DOM como tal, envolviendo su elemento .slick-item con un <div> adicional:
<div><div class="slick-item">1</div></div> Luego, en su CSS, se trata de agregar un margen horizontal arbitrario, por ejemplo, margin: 0 5px para lograr un espacio de 10px entre cada diapositiva:
.slick-item { margin: 0 5px; background-color: #e5e5e5; aspect-ratio: 1.3/1; max-width: 280px; }Vea el ejemplo de prueba de concepto: https://codesandbox.io/s/charming-bas-b78ke?file=/src/components/HelloWorld.vue