jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
a27c84b7a98ee9dfe967324aa82fa36c2a0813da
flowbite-vue/docs/.vitepress/dist/assets/components_carousel.md.8090985f.js
Jaroslav Drzik a27c84b7a9 dist directory
2024-03-12 05:28:28 +01:00

122 lines
34 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as k,h as d,j as D,o as l,c as o,k as s,F as g,D as C,n as b,X as m,e as f,H as e,l as r,a as w,Q as E}from"./chunks/framework.3f630664.js";const I={class:"relative"},P={class:"overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96"},x=["alt","src"],q={key:0,class:"flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2"},T=["aria-label","onClick"],S=s("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"},[s("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"},[s("path",{d:"M15 19l-7-7 7-7","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})]),s("span",{class:"hidden"},"Previous")],-1),V=[S],$=s("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"},[s("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"},[s("path",{d:"M9 5l7 7-7 7","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"})]),s("span",{class:"hidden"},"Next")],-1),N=[$],i=k({__name:"FwbCarousel",props:{pictures:{type:Array,default(){return[]}},noIndicators:{type:Boolean,default:!1},noControls:{type:Boolean,default:!1},slide:{type:Boolean,default:!1},slideInterval:{type:Number,default:3e3},animation:{type:Boolean,default:!1}},setup(p){const a=p,n=d(0),t=d(""),F=d(),h=()=>{F.value=setInterval(function(){v()},a.slideInterval)},y=()=>{clearInterval(F.value),h()},B=_=>{n.value=_,y()},v=()=>{n.value!==a.pictures.length-1?n.value++:n.value=0,t.value="right",y()},A=()=>{n.value!==0?n.value--:n.value=a.pictures.length-1,t.value="left",y()};return D(()=>{a.slide&&h()}),(_,ls)=>(l(),o("div",I,[s("div",P,[(l(!0),o(g,null,C(p.pictures,(u,c)=>(l(),o("div",{key:c,class:b([c===n.value?"z-30":"z-0","absolute inset-0 -translate-y-0"])},[s("img",{alt:u.alt,src:u.src,class:"block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2"},null,8,x)],2))),128))]),p.noIndicators?f("",!0):(l(),o("div",q,[(l(!0),o(g,null,C(p.pictures,(u,c)=>(l(),o("button",{key:c,"aria-label":"Slide "+c,class:b([c===n.value?"bg-white":"bg-white/50","w-3 h-3 rounded-full bg-white"]),"aria-current":"false",type:"button",onClick:m(os=>B(c),["prevent"])},null,10,T))),128))])),p.noControls?f("",!0):(l(),o(g,{key:1},[s("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",onClick:m(A,["prevent"])},V),s("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",onClick:m(v,["prevent"])},N)],64))]))}}),j={class:"vp-raw"},z={__name:"FwbCarouselExample",setup(p){const a=[{alt:"Picture 1",src:"https://flowbite.com/docs/images/carousel/carousel-1.svg"},{alt:"Picture 2",src:"https://flowbite.com/docs/images/carousel/carousel-2.svg"},{alt:"Picture 3",src:"https://flowbite.com/docs/images/carousel/carousel-3.svg"}];return(n,t)=>(l(),o("div",j,[e(r(i),{pictures:a})]))}},R={class:"vp-raw"},M={__name:"FwbCarouselExampleSlide",setup(p){const a=[{alt:"Picture 1",src:"https://flowbite.com/docs/images/carousel/carousel-1.svg"},{alt:"Picture 2",src:"https://flowbite.com/docs/images/carousel/carousel-2.svg"},{alt:"Picture 3",src:"https://flowbite.com/docs/images/carousel/carousel-3.svg"}];return(n,t)=>(l(),o("div",R,[e(r(i),{pictures:a,slide:""})]))}},O={class:"vp-raw"},W={__name:"FwbCarouselExampleSlideInterval",setup(p){const a=[{alt:"Picture 1",src:"https://flowbite.com/docs/images/carousel/carousel-1.svg"},{alt:"Picture 2",src:"https://flowbite.com/docs/images/carousel/carousel-2.svg"},{alt:"Picture 3",src:"https://flowbite.com/docs/images/carousel/carousel-3.svg"}];return(n,t)=>(l(),o("div",O,[e(r(i),{pictures:a,"slide-interval":1e3,slide:""})]))}},H={class:"vp-raw"},J={__name:"FwbCarouselExampleWithoutControls",setup(p){const a=[{alt:"Picture 1",src:"https://flowbite.com/docs/images/carousel/carousel-1.svg"},{alt:"Picture 2",src:"https://flowbite.com/docs/images/carousel/carousel-2.svg"},{alt:"Picture 3",src:"https://flowbite.com/docs/images/carousel/carousel-3.svg"}];return(n,t)=>(l(),o("div",H,[e(r(i),{"no-controls":"",pictures:a})]))}},L={class:"vp-raw"},Q={__name:"FwbCarouselExampleWithoutIndicators",setup(p){const a=[{alt:"Picture 1",src:"https://flowbite.com/docs/images/carousel/carousel-1.svg"},{alt:"Picture 2",src:"https://flowbite.com/docs/images/carousel/carousel-2.svg"},{alt:"Picture 3",src:"https://flowbite.com/docs/images/carousel/carousel-3.svg"}];return(n,t)=>(l(),o("div",L,[e(r(i),{"no-indicators":"",pictures:a})]))}},U=s("h1",{id:"vue-carousel-flowbite",tabindex:"-1"},[w("Vue Carousel - Flowbite "),s("a",{class:"header-anchor",href:"#vue-carousel-flowbite","aria-label":'Permalink to "Vue Carousel - Flowbite"'},"​")],-1),X=s("p",null,"Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options",-1),G=s("h2",{id:"basic-carousel",tabindex:"-1"},[w("Basic Carousel "),s("a",{class:"header-anchor",href:"#basic-carousel","aria-label":'Permalink to "Basic Carousel"'},"​")],-1),K=E(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;pictures&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</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;">&#39;flowbite-vue&#39;</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;">&#39;/images/img-1.svg&#39;</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">&#39;Image 1&#39;</span><span style="color:#E1E4E8;">},</span></span>
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">&#39;/images/img-2.svg&#39;</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">&#39;Image 2&#39;</span><span style="color:#E1E4E8;">},</span></span>
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">&#39;/images/img-3.svg&#39;</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">&#39;Image 3&#39;</span><span style="color:#E1E4E8;">},</span></span>
<span class="line"><span style="color:#E1E4E8;">]</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;pictures&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</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;">&#39;flowbite-vue&#39;</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;">&#39;/images/img-1.svg&#39;</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">&#39;Image 1&#39;</span><span style="color:#24292E;">},</span></span>
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">&#39;/images/img-2.svg&#39;</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">&#39;Image 2&#39;</span><span style="color:#24292E;">},</span></span>
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">&#39;/images/img-3.svg&#39;</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">&#39;Image 3&#39;</span><span style="color:#24292E;">},</span></span>
<span class="line"><span style="color:#24292E;">]</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</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 &quot;Carousel without controls&quot;">​</a></h2>`,2),Y=E(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;pictures&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</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;">&#39;flowbite-vue&#39;</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;">&#39;/images/img-1.svg&#39;</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">&#39;Image 1&#39;</span><span style="color:#E1E4E8;">},</span></span>
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">&#39;/images/img-2.svg&#39;</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">&#39;Image 2&#39;</span><span style="color:#E1E4E8;">},</span></span>
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">&#39;/images/img-3.svg&#39;</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">&#39;Image 3&#39;</span><span style="color:#E1E4E8;">},</span></span>
<span class="line"><span style="color:#E1E4E8;">]</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;pictures&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</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;">&#39;flowbite-vue&#39;</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;">&#39;/images/img-1.svg&#39;</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">&#39;Image 1&#39;</span><span style="color:#24292E;">},</span></span>
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">&#39;/images/img-2.svg&#39;</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">&#39;Image 2&#39;</span><span style="color:#24292E;">},</span></span>
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">&#39;/images/img-3.svg&#39;</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">&#39;Image 3&#39;</span><span style="color:#24292E;">},</span></span>
<span class="line"><span style="color:#24292E;">]</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</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 &quot;Carousel without indicators&quot;">​</a></h2>`,2),Z=E(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;pictures&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</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;">&#39;flowbite-vue&#39;</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;">&#39;/images/img-1.svg&#39;</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">&#39;Image 1&#39;</span><span style="color:#E1E4E8;">},</span></span>
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">&#39;/images/img-2.svg&#39;</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">&#39;Image 2&#39;</span><span style="color:#E1E4E8;">},</span></span>
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">&#39;/images/img-3.svg&#39;</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">&#39;Image 3&#39;</span><span style="color:#E1E4E8;">},</span></span>
<span class="line"><span style="color:#E1E4E8;">]</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;pictures&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</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;">&#39;flowbite-vue&#39;</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;">&#39;/images/img-1.svg&#39;</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">&#39;Image 1&#39;</span><span style="color:#24292E;">},</span></span>
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">&#39;/images/img-2.svg&#39;</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">&#39;Image 2&#39;</span><span style="color:#24292E;">},</span></span>
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">&#39;/images/img-3.svg&#39;</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">&#39;Image 3&#39;</span><span style="color:#24292E;">},</span></span>
<span class="line"><span style="color:#24292E;">]</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</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 &quot;Carousel with slide animation&quot;">​</a></h2>`,2),ss=E(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;pictures&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">slide</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</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;">&#39;flowbite-vue&#39;</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;">&#39;/images/img-1.svg&#39;</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">&#39;Image 1&#39;</span><span style="color:#E1E4E8;">},</span></span>
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">&#39;/images/img-2.svg&#39;</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">&#39;Image 2&#39;</span><span style="color:#E1E4E8;">},</span></span>
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">&#39;/images/img-3.svg&#39;</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">&#39;Image 3&#39;</span><span style="color:#E1E4E8;">},</span></span>
<span class="line"><span style="color:#E1E4E8;">]</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;pictures&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">slide</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</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;">&#39;flowbite-vue&#39;</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;">&#39;/images/img-1.svg&#39;</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">&#39;Image 1&#39;</span><span style="color:#24292E;">},</span></span>
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">&#39;/images/img-2.svg&#39;</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">&#39;Image 2&#39;</span><span style="color:#24292E;">},</span></span>
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">&#39;/images/img-3.svg&#39;</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">&#39;Image 3&#39;</span><span style="color:#24292E;">},</span></span>
<span class="line"><span style="color:#24292E;">]</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</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 &quot;Carousel with slide and custom interval&quot;">​</a></h2>`,2),as=E(`<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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</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;">&quot;pictures&quot;</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;">&quot;1000&quot;</span><span style="color:#E1E4E8;">/&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</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;">&#39;flowbite-vue&#39;</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;">&#39;/images/img-1.svg&#39;</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">&#39;Image 1&#39;</span><span style="color:#E1E4E8;">},</span></span>
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">&#39;/images/img-2.svg&#39;</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">&#39;Image 2&#39;</span><span style="color:#E1E4E8;">},</span></span>
<span class="line"><span style="color:#E1E4E8;"> {src: </span><span style="color:#9ECBFF;">&#39;/images/img-3.svg&#39;</span><span style="color:#E1E4E8;">, alt: </span><span style="color:#9ECBFF;">&#39;Image 3&#39;</span><span style="color:#E1E4E8;">},</span></span>
<span class="line"><span style="color:#E1E4E8;">]</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</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;">&quot;pictures&quot;</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;">&quot;1000&quot;</span><span style="color:#24292E;">/&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</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;">&#39;flowbite-vue&#39;</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;">&#39;/images/img-1.svg&#39;</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">&#39;Image 1&#39;</span><span style="color:#24292E;">},</span></span>
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">&#39;/images/img-2.svg&#39;</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">&#39;Image 2&#39;</span><span style="color:#24292E;">},</span></span>
<span class="line"><span style="color:#24292E;"> {src: </span><span style="color:#032F62;">&#39;/images/img-3.svg&#39;</span><span style="color:#24292E;">, alt: </span><span style="color:#032F62;">&#39;Image 3&#39;</span><span style="color:#24292E;">},</span></span>
<span class="line"><span style="color:#24292E;">]</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div><h2 id="carousel-api" tabindex="-1">Carousel API <a class="header-anchor" href="#carousel-api" aria-label="Permalink to &quot;Carousel API&quot;">​</a></h2><h3 id="props" tabindex="-1">Props <a class="header-anchor" href="#props" aria-label="Permalink to &quot;Props&quot;">​</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: &#39;&#39;, alt: &#39;&#39;}, ...]</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>`,4),ts=JSON.parse('{"title":"Vue Carousel - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/carousel.md","filePath":"components/carousel.md"}'),ns={name:"components/carousel.md"},cs=Object.assign(ns,{setup(p){return(a,n)=>(l(),o("div",null,[U,X,G,e(z),K,e(J),Y,e(Q),Z,e(M),ss,e(W),as]))}});export{ts as __pageData,cs as default};
Reference in New Issue View Git Blame Copy Permalink