146 lines
76 KiB
HTML
146 lines
76 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US" dir="ltr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Vue Carousel - Flowbite | Flowbite Vue 3</title>
|
||
<meta name="description" content="A VitePress site">
|
||
<link rel="preload stylesheet" href="/assets/style.a165892e.css" as="style">
|
||
|
||
<script type="module" src="/assets/app.8d65fb2d.js"></script>
|
||
<link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
|
||
<link rel="modulepreload" href="/assets/chunks/framework.3f630664.js">
|
||
<link rel="modulepreload" href="/assets/chunks/theme.3359535a.js">
|
||
<link rel="modulepreload" href="/assets/chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js">
|
||
<link rel="modulepreload" href="/assets/components_carousel.md.8090985f.lean.js">
|
||
<link rel="icon" type="image/svg" href="/assets/logo.svg">
|
||
<script>(function(n,e,r,s,t,c){e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},t=n.createElement("script"),c=n.getElementsByTagName("script")[0],t.async=1,t.src=r,t.id="fathom-script",c.parentNode.insertBefore(t,c)})(document,window,"https://cdn.usefathom.com/tracker.js","fathom"),fathom("set","siteId","MPNTKCVJ"),fathom("trackPageview");</script>
|
||
<script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||
</head>
|
||
<body>
|
||
<div id="app"><div class="Layout" data-v-1919c326><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-1919c326 data-v-7e5bc4a5><div class="VPNavBar has-sidebar" data-v-7e5bc4a5 data-v-a0fd61f4><div class="container" data-v-a0fd61f4><div class="title" data-v-a0fd61f4><div class="VPNavBarTitle has-sidebar" data-v-a0fd61f4 data-v-86d1bed8><a class="title" href="/" data-v-86d1bed8><!--[--><!--]--><!--[--><img class="VPImage logo" src="/assets/logo.svg" alt data-v-8426fc1a><!--]--><!--[-->Flowbite Vue 3<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-a0fd61f4><div class="curtain" data-v-a0fd61f4></div><div class="content-body" data-v-a0fd61f4><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a0fd61f4><!----></div><!----><!----><div class="VPNavBarAppearance appearance" data-v-a0fd61f4 data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a0fd61f4 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/themesberg/flowbite-vue" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://discord.gg/4eeurUVvTy" aria-label="discord" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a0fd61f4 data-v-40855f84 data-v-9c007e85><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-9c007e85><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-9c007e85><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-9c007e85><div class="VPMenu" data-v-9c007e85 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-ce54a7d1 data-v-b1685198><span class="check" data-v-b1685198><span class="icon" data-v-b1685198><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-ce54a7d1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-ce54a7d1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/themesberg/flowbite-vue" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink no-icon" href="https://discord.gg/4eeurUVvTy" aria-label="discord" target="_blank" rel="noopener" data-v-7bc22406 data-v-f80f8133><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a0fd61f4 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav reached-top" data-v-1919c326 data-v-79c8c1df><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-79c8c1df><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-79c8c1df><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-79c8c1df>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-79c8c1df data-v-1c15a60a><button data-v-1c15a60a>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-1919c326 data-v-b00e2fdd><div class="curtain" data-v-b00e2fdd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b00e2fdd><span class="visually-hidden" id="sidebar-aria-label" data-v-b00e2fdd> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0" data-v-b00e2fdd data-v-e31bd47b><!----><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Home</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/pages/getting-started" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Quickstart</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0 has-active" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Components</h2><!----></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/accordion" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Accordion</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/alert" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Alert</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/avatar" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Avatar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/badge" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Badge</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/breadcrumb" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Breadcrumb</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/button" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Button</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/button-group" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Button Group</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/card" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Card</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/carousel" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Carousel</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/dropdown" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Dropdown</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/jumbotron" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Jumbotron</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/list-group" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>ListGroup</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/pagination" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Pagination</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/progress" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Progress</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/rating" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Rating</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/spinner" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Spinner</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/table" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Table</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/tabs" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Tabs</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/timeline" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Timeline</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/toast" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Toast</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/tooltip" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Tooltip</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/modal" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Modal</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/navbar" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Navbar</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/footer" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Footer</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/sidebar" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Sidebar</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Form</h2><!----></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/input" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Input</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/fileInput" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>File Input</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/select" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Select</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/textarea" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Textarea</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/checkbox" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Checkbox</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/radio" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Radio</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/toggle" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Toggle</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/range" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Range</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Typography</h2><!----></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/heading" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Heading</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/paragraph" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Paragraph</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/image" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Image</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/link" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Link</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-b00e2fdd><section class="VPSidebarItem level-0" data-v-b00e2fdd data-v-e31bd47b><div class="item" role="button" tabindex="0" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><h2 class="text" data-v-e31bd47b>Utils</h2><!----></div><div class="items" data-v-e31bd47b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/flowbiteThemable/flowbiteThemable" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Flowbite Themable</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e31bd47b data-v-e31bd47b><div class="item" data-v-e31bd47b><div class="indicator" data-v-e31bd47b></div><a class="VPLink link link" href="/components/toastProvider/toastProvider" data-v-e31bd47b><!--[--><p class="text" data-v-e31bd47b>Toast Provider</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-1919c326 data-v-669faec9><div class="VPDoc has-sidebar has-aside" data-v-669faec9 data-v-6b87e69f><!--[--><!--]--><div class="container" data-v-6b87e69f><div class="aside" data-v-6b87e69f><div class="aside-curtain" data-v-6b87e69f></div><div class="aside-container" data-v-6b87e69f><div class="aside-content" data-v-6b87e69f><div class="VPDocAside" data-v-6b87e69f data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-d330b1bb><div class="content" data-v-d330b1bb><div class="outline-marker" data-v-d330b1bb></div><div class="outline-title" role="heading" aria-level="2" data-v-d330b1bb>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-d330b1bb><span class="visually-hidden" id="doc-outline-aria-label" data-v-d330b1bb> Table of Contents for current page </span><ul class="root" data-v-d330b1bb data-v-d0ee3533><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6b87e69f><div class="content-container" data-v-6b87e69f><!--[--><!--]--><!----><main class="main" data-v-6b87e69f><div style="position:relative;" class="vp-doc _components_carousel" data-v-6b87e69f><div><h1 id="vue-carousel-flowbite" tabindex="-1">Vue Carousel - Flowbite <a class="header-anchor" href="#vue-carousel-flowbite" aria-label="Permalink to "Vue Carousel - Flowbite""></a></h1><p>Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options</p><h2 id="basic-carousel" tabindex="-1">Basic Carousel <a class="header-anchor" href="#basic-carousel" aria-label="Permalink to "Basic Carousel""></a></h2><div class="vp-raw"><div class="relative"><div class="overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96"><!--[--><div class="z-30 absolute inset-0 -translate-y-0"><img alt="Picture 1" src="https://flowbite.com/docs/images/carousel/carousel-1.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"></div><div class="z-0 absolute inset-0 -translate-y-0"><img alt="Picture 2" src="https://flowbite.com/docs/images/carousel/carousel-2.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"></div><div class="z-0 absolute inset-0 -translate-y-0"><img alt="Picture 3" src="https://flowbite.com/docs/images/carousel/carousel-3.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"></div><!--]--></div><div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2"><!--[--><button aria-label="Slide 0" class="bg-white w-3 h-3 rounded-full bg-white" aria-current="false" type="button"></button><button aria-label="Slide 1" class="bg-white/50 w-3 h-3 rounded-full bg-white" aria-current="false" type="button"></button><button aria-label="Slide 2" class="bg-white/50 w-3 h-3 rounded-full bg-white" aria-current="false" type="button"></button><!--]--></div><!--[--><button class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev type="button"><span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"><svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15 19l-7-7 7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg><span class="hidden">Previous</span></span></button><button class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next type="button"><span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"><svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg><span class="hidden">Next</span></span></button><!--]--></div></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-carousel</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:pictures</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"pictures"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbCarousel } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">pictures</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">'/images/img-1.svg'</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">'Image 1'</span><span style="color:#E1E4E8;">},</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">'/images/img-2.svg'</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">'Image 2'</span><span style="color:#E1E4E8;">},</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">'/images/img-3.svg'</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">'Image 3'</span><span style="color:#E1E4E8;">},</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;">]</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-carousel</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:pictures</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"pictures"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbCarousel } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">pictures</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [</span></span>
|
||
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">'/images/img-1.svg'</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">'Image 1'</span><span style="color:#24292E;">},</span></span>
|
||
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">'/images/img-2.svg'</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">'Image 2'</span><span style="color:#24292E;">},</span></span>
|
||
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">'/images/img-3.svg'</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">'Image 3'</span><span style="color:#24292E;">},</span></span>
|
||
<span class="line"><span style="color:#24292E;">]</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="carousel-without-controls" tabindex="-1">Carousel without controls <a class="header-anchor" href="#carousel-without-controls" aria-label="Permalink to "Carousel without controls""></a></h2><div class="vp-raw"><div class="relative"><div class="overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96"><!--[--><div class="z-30 absolute inset-0 -translate-y-0"><img alt="Picture 1" src="https://flowbite.com/docs/images/carousel/carousel-1.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"></div><div class="z-0 absolute inset-0 -translate-y-0"><img alt="Picture 2" src="https://flowbite.com/docs/images/carousel/carousel-2.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"></div><div class="z-0 absolute inset-0 -translate-y-0"><img alt="Picture 3" src="https://flowbite.com/docs/images/carousel/carousel-3.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"></div><!--]--></div><div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2"><!--[--><button aria-label="Slide 0" class="bg-white w-3 h-3 rounded-full bg-white" aria-current="false" type="button"></button><button aria-label="Slide 1" class="bg-white/50 w-3 h-3 rounded-full bg-white" aria-current="false" type="button"></button><button aria-label="Slide 2" class="bg-white/50 w-3 h-3 rounded-full bg-white" aria-current="false" type="button"></button><!--]--></div><!----></div></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-carousel</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">no-controls</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:pictures</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"pictures"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbCarousel } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">pictures</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">'/images/img-1.svg'</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">'Image 1'</span><span style="color:#E1E4E8;">},</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">'/images/img-2.svg'</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">'Image 2'</span><span style="color:#E1E4E8;">},</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">'/images/img-3.svg'</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">'Image 3'</span><span style="color:#E1E4E8;">},</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;">]</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-carousel</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">no-controls</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:pictures</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"pictures"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbCarousel } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">pictures</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [</span></span>
|
||
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">'/images/img-1.svg'</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">'Image 1'</span><span style="color:#24292E;">},</span></span>
|
||
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">'/images/img-2.svg'</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">'Image 2'</span><span style="color:#24292E;">},</span></span>
|
||
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">'/images/img-3.svg'</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">'Image 3'</span><span style="color:#24292E;">},</span></span>
|
||
<span class="line"><span style="color:#24292E;">]</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="carousel-without-indicators" tabindex="-1">Carousel without indicators <a class="header-anchor" href="#carousel-without-indicators" aria-label="Permalink to "Carousel without indicators""></a></h2><div class="vp-raw"><div class="relative"><div class="overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96"><!--[--><div class="z-30 absolute inset-0 -translate-y-0"><img alt="Picture 1" src="https://flowbite.com/docs/images/carousel/carousel-1.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"></div><div class="z-0 absolute inset-0 -translate-y-0"><img alt="Picture 2" src="https://flowbite.com/docs/images/carousel/carousel-2.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"></div><div class="z-0 absolute inset-0 -translate-y-0"><img alt="Picture 3" src="https://flowbite.com/docs/images/carousel/carousel-3.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"></div><!--]--></div><!----><!--[--><button class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev type="button"><span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"><svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15 19l-7-7 7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg><span class="hidden">Previous</span></span></button><button class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next type="button"><span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"><svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg><span class="hidden">Next</span></span></button><!--]--></div></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-carousel</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">no-indicators</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:pictures</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"pictures"</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbCarousel } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">pictures</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">'/images/img-1.svg'</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">'Image 1'</span><span style="color:#E1E4E8;">},</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">'/images/img-2.svg'</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">'Image 2'</span><span style="color:#E1E4E8;">},</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">'/images/img-3.svg'</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">'Image 3'</span><span style="color:#E1E4E8;">},</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;">]</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-carousel</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">no-indicators</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:pictures</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"pictures"</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbCarousel } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">pictures</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [</span></span>
|
||
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">'/images/img-1.svg'</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">'Image 1'</span><span style="color:#24292E;">},</span></span>
|
||
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">'/images/img-2.svg'</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">'Image 2'</span><span style="color:#24292E;">},</span></span>
|
||
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">'/images/img-3.svg'</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">'Image 3'</span><span style="color:#24292E;">},</span></span>
|
||
<span class="line"><span style="color:#24292E;">]</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="carousel-with-slide-animation" tabindex="-1">Carousel with slide animation <a class="header-anchor" href="#carousel-with-slide-animation" aria-label="Permalink to "Carousel with slide animation""></a></h2><div class="vp-raw"><div class="relative"><div class="overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96"><!--[--><div class="z-30 absolute inset-0 -translate-y-0"><img alt="Picture 1" src="https://flowbite.com/docs/images/carousel/carousel-1.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"></div><div class="z-0 absolute inset-0 -translate-y-0"><img alt="Picture 2" src="https://flowbite.com/docs/images/carousel/carousel-2.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"></div><div class="z-0 absolute inset-0 -translate-y-0"><img alt="Picture 3" src="https://flowbite.com/docs/images/carousel/carousel-3.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"></div><!--]--></div><div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2"><!--[--><button aria-label="Slide 0" class="bg-white w-3 h-3 rounded-full bg-white" aria-current="false" type="button"></button><button aria-label="Slide 1" class="bg-white/50 w-3 h-3 rounded-full bg-white" aria-current="false" type="button"></button><button aria-label="Slide 2" class="bg-white/50 w-3 h-3 rounded-full bg-white" aria-current="false" type="button"></button><!--]--></div><!--[--><button class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev type="button"><span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"><svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15 19l-7-7 7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg><span class="hidden">Previous</span></span></button><button class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next type="button"><span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"><svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg><span class="hidden">Next</span></span></button><!--]--></div></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-carousel</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:pictures</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"pictures"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">slide</span><span style="color:#E1E4E8;"> /></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbCarousel } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">pictures</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">'/images/img-1.svg'</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">'Image 1'</span><span style="color:#E1E4E8;">},</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">'/images/img-2.svg'</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">'Image 2'</span><span style="color:#E1E4E8;">},</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">'/images/img-3.svg'</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">'Image 3'</span><span style="color:#E1E4E8;">},</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;">]</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-carousel</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:pictures</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"pictures"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">slide</span><span style="color:#24292E;"> /></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbCarousel } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">pictures</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [</span></span>
|
||
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">'/images/img-1.svg'</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">'Image 1'</span><span style="color:#24292E;">},</span></span>
|
||
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">'/images/img-2.svg'</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">'Image 2'</span><span style="color:#24292E;">},</span></span>
|
||
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">'/images/img-3.svg'</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">'Image 3'</span><span style="color:#24292E;">},</span></span>
|
||
<span class="line"><span style="color:#24292E;">]</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="carousel-with-slide-and-custom-interval" tabindex="-1">Carousel with slide and custom interval <a class="header-anchor" href="#carousel-with-slide-and-custom-interval" aria-label="Permalink to "Carousel with slide and custom interval""></a></h2><div class="vp-raw"><div class="relative"><div class="overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96"><!--[--><div class="z-30 absolute inset-0 -translate-y-0"><img alt="Picture 1" src="https://flowbite.com/docs/images/carousel/carousel-1.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"></div><div class="z-0 absolute inset-0 -translate-y-0"><img alt="Picture 2" src="https://flowbite.com/docs/images/carousel/carousel-2.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"></div><div class="z-0 absolute inset-0 -translate-y-0"><img alt="Picture 3" src="https://flowbite.com/docs/images/carousel/carousel-3.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"></div><!--]--></div><div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2"><!--[--><button aria-label="Slide 0" class="bg-white w-3 h-3 rounded-full bg-white" aria-current="false" type="button"></button><button aria-label="Slide 1" class="bg-white/50 w-3 h-3 rounded-full bg-white" aria-current="false" type="button"></button><button aria-label="Slide 2" class="bg-white/50 w-3 h-3 rounded-full bg-white" aria-current="false" type="button"></button><!--]--></div><!--[--><button class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev type="button"><span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"><svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15 19l-7-7 7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg><span class="hidden">Previous</span></span></button><button class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next type="button"><span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"><svg class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg><span class="hidden">Next</span></span></button><!--]--></div></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-carousel</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:pictures</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"pictures"</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">slide</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">:slide-interval</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"1000"</span><span style="color:#E1E4E8;">/></span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbCarousel } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#F97583;">const</span><span style="color:#E1E4E8;"> </span><span style="color:#79B8FF;">pictures</span><span style="color:#E1E4E8;"> </span><span style="color:#F97583;">=</span><span style="color:#E1E4E8;"> [</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">'/images/img-1.svg'</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">'Image 1'</span><span style="color:#E1E4E8;">},</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">'/images/img-2.svg'</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">'Image 2'</span><span style="color:#E1E4E8;">},</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">'/images/img-3.svg'</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">'Image 3'</span><span style="color:#E1E4E8;">},</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;">]</span></span>
|
||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-carousel</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:pictures</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"pictures"</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">slide</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">:slide-interval</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"1000"</span><span style="color:#24292E;">/></span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbCarousel } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#D73A49;">const</span><span style="color:#24292E;"> </span><span style="color:#005CC5;">pictures</span><span style="color:#24292E;"> </span><span style="color:#D73A49;">=</span><span style="color:#24292E;"> [</span></span>
|
||
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">'/images/img-1.svg'</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">'Image 1'</span><span style="color:#24292E;">},</span></span>
|
||
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">'/images/img-2.svg'</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">'Image 2'</span><span style="color:#24292E;">},</span></span>
|
||
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">'/images/img-3.svg'</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">'Image 3'</span><span style="color:#24292E;">},</span></span>
|
||
<span class="line"><span style="color:#24292E;">]</span></span>
|
||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div><h2 id="carousel-api" tabindex="-1">Carousel API <a class="header-anchor" href="#carousel-api" aria-label="Permalink to "Carousel API""></a></h2><h3 id="props" tabindex="-1">Props <a class="header-anchor" href="#props" aria-label="Permalink to "Props""></a></h3><table><thead><tr><th>Name</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td>animation</td><td>Boolean</td><td><code>true</code>, <code>false</code></td><td><code>false</code></td></tr><tr><td>noControls</td><td>Boolean</td><td><code>true</code>, <code>false</code></td><td><code>false</code></td></tr><tr><td>noIndicators</td><td>Boolean</td><td><code>true</code>, <code>false</code></td><td><code>false</code></td></tr><tr><td>pictures</td><td>Array</td><td><code>[{source: '', alt: ''}, ...]</code></td><td><code>[]</code></td></tr><tr><td>slide</td><td>Boolean</td><td><code>true</code>, <code>false</code></td><td><code>false</code></td></tr><tr><td>slideInterval</td><td>Number</td><td></td><td><code>3000</code></td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-6b87e69f data-v-ef5dee53><!--[--><!--]--><!----><nav class="prev-next" data-v-ef5dee53><div class="pager" data-v-ef5dee53><a class="pager-link prev" href="/components/card" data-v-ef5dee53><span class="desc" data-v-ef5dee53>Previous page</span><span class="title" data-v-ef5dee53>Card</span></a></div><div class="pager" data-v-ef5dee53><a class="pager-link next" href="/components/dropdown" data-v-ef5dee53><span class="desc" data-v-ef5dee53>Next page</span><span class="title" data-v-ef5dee53>Dropdown</span></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-1919c326 data-v-e03eb2e1><div class="container" data-v-e03eb2e1><p class="message" data-v-e03eb2e1>Released under the MIT License.</p><p class="copyright" data-v-e03eb2e1>Copyright © 2023 Flowbite™</p></div></footer><!--[--><!--]--></div></div>
|
||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"components_playground_playground.md\":\"69e01489\",\"components_accordion.md\":\"3f1ef99a\",\"components_alert.md\":\"255adf89\",\"components_avatar.md\":\"8db14583\",\"components_badge.md\":\"ffb613ab\",\"components_button-group.md\":\"39681d07\",\"components_breadcrumb.md\":\"e0d619ba\",\"components_card.md\":\"8594cbd9\",\"components_carousel.md\":\"8090985f\",\"components_checkbox.md\":\"ed60323a\",\"components_dropdown.md\":\"3551a089\",\"components_fileinput.md\":\"4013b935\",\"components_flowbitethemable_flowbitethemable.md\":\"696f24eb\",\"components_button.md\":\"39f535da\",\"components_heading.md\":\"e8348a42\",\"components_image.md\":\"e097f963\",\"components_input.md\":\"455fa912\",\"components_link.md\":\"ae3cc9d2\",\"components_footer.md\":\"0590fa94\",\"components_jumbotron.md\":\"7e83799d\",\"components_modal.md\":\"48165202\",\"components_list-group.md\":\"e9bebe16\",\"components_paragraph.md\":\"28aca1b3\",\"components_progress.md\":\"af9b4180\",\"components_pagination.md\":\"c228117a\",\"components_navbar.md\":\"e4dfa350\",\"components_range.md\":\"9320c947\",\"components_rating.md\":\"1bf1f257\",\"components_radio.md\":\"b618a9a7\",\"components_select.md\":\"654d7864\",\"components_spinner.md\":\"37ac3cc2\",\"components_table.md\":\"a270deef\",\"components_textarea.md\":\"b787a2ff\",\"components_tabs.md\":\"b0c6e412\",\"components_sidebar.md\":\"8fae9f09\",\"components_toastprovider_toastprovider.md\":\"9ae8b914\",\"components_toast.md\":\"552e0ecb\",\"index.md\":\"5a24cb33\",\"components_toggle.md\":\"05a55234\",\"pages_getting-started.md\":\"0e48f016\",\"components_timeline.md\":\"0bc3fcd0\",\"components_tooltip.md\":\"d14c95e6\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Flowbite Vue 3\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"sidebar\":[{\"items\":[{\"text\":\"Home\",\"link\":\"/\"},{\"text\":\"Quickstart\",\"link\":\"/pages/getting-started\"}]},{\"text\":\"Components\",\"collapsible\":true,\"items\":[{\"text\":\"Accordion\",\"link\":\"/components/accordion\"},{\"text\":\"Alert\",\"link\":\"/components/alert\"},{\"text\":\"Avatar\",\"link\":\"/components/avatar\"},{\"text\":\"Badge\",\"link\":\"/components/badge\"},{\"text\":\"Breadcrumb\",\"link\":\"/components/breadcrumb\"},{\"text\":\"Button\",\"link\":\"/components/button\"},{\"text\":\"Button Group\",\"link\":\"/components/button-group\"},{\"text\":\"Card\",\"link\":\"/components/card.md\"},{\"text\":\"Carousel\",\"link\":\"/components/carousel\"},{\"text\":\"Dropdown\",\"link\":\"/components/dropdown\"},{\"text\":\"Jumbotron\",\"link\":\"/components/jumbotron\"},{\"text\":\"ListGroup\",\"link\":\"/components/list-group\"},{\"text\":\"Pagination\",\"link\":\"/components/pagination\"},{\"text\":\"Progress\",\"link\":\"/components/progress\"},{\"text\":\"Rating\",\"link\":\"/components/rating\"},{\"text\":\"Spinner\",\"link\":\"/components/spinner\"},{\"text\":\"Table\",\"link\":\"/components/table\"},{\"text\":\"Tabs\",\"link\":\"/components/tabs\"},{\"text\":\"Timeline\",\"link\":\"/components/timeline\"},{\"text\":\"Toast\",\"link\":\"/components/toast\"},{\"text\":\"Tooltip\",\"link\":\"/components/tooltip\"},{\"text\":\"Modal\",\"link\":\"/components/modal\"},{\"text\":\"Navbar\",\"link\":\"/components/navbar\"},{\"text\":\"Footer\",\"link\":\"/components/footer\"},{\"text\":\"Sidebar\",\"link\":\"/components/sidebar\"}]},{\"text\":\"Form\",\"collapsible\":true,\"items\":[{\"text\":\"Input\",\"link\":\"/components/input\"},{\"text\":\"File Input\",\"link\":\"/components/fileInput\"},{\"text\":\"Select\",\"link\":\"/components/select\"},{\"text\":\"Textarea\",\"link\":\"/components/textarea\"},{\"text\":\"Checkbox\",\"link\":\"/components/checkbox\"},{\"text\":\"Radio\",\"link\":\"/components/radio\"},{\"text\":\"Toggle\",\"link\":\"/components/toggle\"},{\"text\":\"Range\",\"link\":\"/components/range\"}]},{\"text\":\"Typography\",\"collapsible\":true,\"items\":[{\"text\":\"Heading\",\"link\":\"/components/heading\"},{\"text\":\"Paragraph\",\"link\":\"/components/paragraph\"},{\"text\":\"Image\",\"link\":\"/components/image\"},{\"text\":\"Link\",\"link\":\"/components/link\"}]},{\"text\":\"Utils\",\"collapsible\":true,\"items\":[{\"text\":\"Flowbite Themable\",\"link\":\"/components/flowbiteThemable/flowbiteThemable.md\"},{\"text\":\"Toast Provider\",\"link\":\"/components/toastProvider/toastProvider.md\"}]}],\"logo\":\"/assets/logo.svg\",\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/themesberg/flowbite-vue\"},{\"icon\":\"discord\",\"link\":\"https://discord.gg/4eeurUVvTy\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2023 Flowbite™\"}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":true}");</script>
|
||
|
||
</body>
|
||
</html> |