hogwarts-ui 官方网站

Appearance

Carousel 轮播图 v2 ​

基础用法 ​

点击查看示例代码
vue
<template>
	<h-carousel-v2 :h_data="h_data"></h-carousel-v2>
</template>

<script setup>
const h_data = {
  content: [
    'https://dev.hogwarts-site.ceba.ceshiren.com/image/%E8%BF%9B%E9%98%B6%E5%8C%BA/%E6%B5%8B%E8%AF%95%E5%B9%B3%E5%8F%B0%E6%90%AD%E5%BB%BA%E4%B8%8E%E4%BD%93%E7%B3%BB.png',
    'https://dev.hogwarts-site.ceba.ceshiren.com/image/%E8%BF%9B%E9%98%B6%E5%8C%BA/%E6%8A%80%E6%9C%AF%E8%BD%AC%E7%AE%A1%E7%90%86.png',
    'https://dev.hogwarts-site.ceba.ceshiren.com/image/%E8%BF%9B%E9%98%B6%E5%8C%BA/SDK%E6%B5%8B%E8%AF%95%E4%BD%93%E7%B3%BB.png',
    'https://dev.hogwarts-site.ceba.ceshiren.com/image/%E8%BF%9B%E9%98%B6%E5%8C%BA/%E4%BB%A3%E7%A0%81%E6%8F%92%E6%A1%A9.png',
    'https://dev.hogwarts-site.ceba.ceshiren.com/image/%E8%BF%9B%E9%98%B6%E5%8C%BA/%E4%B8%AD%E9%97%B4%E4%BB%B6.jpeg',
    'https://dev.hogwarts-site.ceba.ceshiren.com/image/%E8%BF%9B%E9%98%B6%E5%8C%BA/%E6%80%A7%E8%83%BD%E6%B5%8B%E8%AF%95%E5%AE%9E%E6%88%98.png',
    'https://dev.hogwarts-site.ceba.ceshiren.com/image/%E8%BF%9B%E9%98%B6%E5%8C%BA/docker.jpeg' 
  ]
}
</script>
<template>
	<h-carousel-v2 :h_data="h_data"></h-carousel-v2>
</template>

<script setup>
const h_data = {
  content: [
    'https://dev.hogwarts-site.ceba.ceshiren.com/image/%E8%BF%9B%E9%98%B6%E5%8C%BA/%E6%B5%8B%E8%AF%95%E5%B9%B3%E5%8F%B0%E6%90%AD%E5%BB%BA%E4%B8%8E%E4%BD%93%E7%B3%BB.png',
    'https://dev.hogwarts-site.ceba.ceshiren.com/image/%E8%BF%9B%E9%98%B6%E5%8C%BA/%E6%8A%80%E6%9C%AF%E8%BD%AC%E7%AE%A1%E7%90%86.png',
    'https://dev.hogwarts-site.ceba.ceshiren.com/image/%E8%BF%9B%E9%98%B6%E5%8C%BA/SDK%E6%B5%8B%E8%AF%95%E4%BD%93%E7%B3%BB.png',
    'https://dev.hogwarts-site.ceba.ceshiren.com/image/%E8%BF%9B%E9%98%B6%E5%8C%BA/%E4%BB%A3%E7%A0%81%E6%8F%92%E6%A1%A9.png',
    'https://dev.hogwarts-site.ceba.ceshiren.com/image/%E8%BF%9B%E9%98%B6%E5%8C%BA/%E4%B8%AD%E9%97%B4%E4%BB%B6.jpeg',
    'https://dev.hogwarts-site.ceba.ceshiren.com/image/%E8%BF%9B%E9%98%B6%E5%8C%BA/%E6%80%A7%E8%83%BD%E6%B5%8B%E8%AF%95%E5%AE%9E%E6%88%98.png',
    'https://dev.hogwarts-site.ceba.ceshiren.com/image/%E8%BF%9B%E9%98%B6%E5%8C%BA/docker.jpeg' 
  ]
}
</script>