2 lines
6.1 KiB
JavaScript
2 lines
6.1 KiB
JavaScript
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("",2),Y=E("",2),Z=E("",2),ss=E("",2),as=E("",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};
|