@sswq2020/vue-carousel
Version:
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
2 lines (1 loc) • 1.27 kB
CSS
.x-carousel-indicator{display:flex;position:absolute;bottom:12px;justify-content:center;width:100%}.x-carousel-indicator .x-carousel-indicator-item{cursor:pointer;width:6px;height:6px;border-radius:3px;margin-right:8px;background:var(--pink-color)}.x-carousel-indicator .x-carousel-indicator-item.active{width:24px;background:var(--blue-color);transition:all .3s cubic-bezier(.645,.045,.355,1)}:root{--black-color: #3c3c43;--white-color: #f8f8f8;--pink-color: #d3d5d9;--blue-color: #5e7ce0}.x-carousel{position:relative;overflow:hidden;color:var(--black-color)}.x-carousel-item-container{display:flex;position:relative;transition:transform .5s ease 0s}.x-carousel-item-container>*{flex:1}.x-carousel-pagination{position:absolute;width:100%;top:50%;display:flex;justify-content:space-between;margin-top:-18px}.x-carousel-pagination .arrow{cursor:pointer;width:36px;height:36px;border-radius:18px;background:#fffc;box-shadow:0 4px 16px #0000001a;display:inline-flex;align-items:center;justify-content:center;border:0;outline:0;transition:background-color .3s cubic-bezier(.645,.045,.355,1)}.x-carousel-pagination .arrow:hover{background:var(--white-color)}.x-carousel-pagination .arrow.arrow-left{margin-left:20px}.x-carousel-pagination .arrow.arrow-right{margin-right:20px}