<template><div class="slick"><VueSlickCarouselv-bind="{arrow: true,focusOnSelect: true,speed: 500,slidesToShow: 4,slidesToScroll: 1,touchThreshold: 5,}"><div><div class="slick-item">1</div></div><div><div class="slick-item">2</div></div><div><div class="slick-item">3</div></div><div><div class="slick-item">4</div></div><div><div class="slick-item">5</div></div><div><div class="slick-item">6</div></div><div><div class="slick-item">1</div></div><div><div class="slick-item">2</div></div><div><div class="slick-item">3</div></div><div><div class="slick-item">4</div></div><div><div class="slick-item">5</div></div><div><div class="slick-item">6</div></div><template #prevArrow=""><button class="arrow-btn">&lt;</button></template><template #nextArrow=""><button class="arrow-btn">&gt;</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 {margin: 0 5px;background-color: #e5e5e5;aspect-ratio: 1.3/1;max-width: 280px;}.arrow-btn {border: none;img {height: 40px;}}</style>