0.0.2 • Published 5 months ago
carouselable v0.0.2
3D 旋转木马 轮播图
用法:
Vanilla:
<body>
<div id="carousel">
<div class="carousel-item"></div>
<div class="carousel-item"></div>
<div class="carousel-item"></div>
</div>
</body>
<script type="module">
import { initCarousel } from "./carousel.js";
initCarousel({
xRadius: 350,
yRadius: 35,
farScale: 0.7,
speed: 4,
itemClass: "carousel-item",
handle: document.getElementById("carousel"),
});
</script>VueJS:
<script setup lang="ts">
import { onMounted } from "vue";
import { initCarousel } from "carouselable";
onMounted(() => {
const carousel = document.getElementById("carousel");
if (carousel) {
initCarousel({
itemClass: "carousel-item",
handle: carousel,
xRadius: 350,
yRadius: 55,
farScale: 0.7,
speed: 4,
});
}
});
</script>
<template>
<div class="container">
<div id="carousel">
<div class="carousel-item" style="background-color: rgba(127, 255, 212, 0.3)">
<div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 100px;">👻</div>
</div>
<div class="carousel-item" style="background-color: rgb(127, 150, 255, 0.3)">
<div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 100px;">🥰</div>
</div>
<div class="carousel-item" style="background-color: rgba(255, 127, 249, 0.3)">
<div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 100px;">😎</div>
</div>
<div class="carousel-item" style="background-color: rgba(127, 129, 255, 0.3)">
<div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 100px;">😘</div>
</div>
<div class="carousel-item" style="background-color: rgba(242, 255, 127, 0.3)">
<div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 100px;">🤷♂️</div>
</div>
<div class="carousel-item" style="background-color: rgba(255, 168, 127, 0.3)">
<div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 100px;">😡</div>
</div>
</div>
</div>
</template>编译:
npm build如果你正在编译Vanilla, 请在tsconfig.json中将"module": "CommonJS"注释掉。