1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4530],{94044:function(e,s,a){"use strict";a.d(s,{Z:function(){return t}});var l=a(67294),n=a(6454),i=a(76852);let r=2147483648-1;function t(){let e=(0,n.Z)(),s=(0,l.useRef)();return(0,i.Z)(()=>clearTimeout(s.current)),(0,l.useMemo)(()=>{let a=()=>clearTimeout(s.current);return{set:function(l,n=0){e()&&(a(),n<=r?s.current=setTimeout(l,n):function e(s,a,l){let n=l-Date.now();s.current=n<=r?setTimeout(a,n):setTimeout(()=>e(s,a,l),r)}(s,l,Date.now()+n))},clear:a,handleRef:s}},[])}},21925:function(e,s,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/bootstrap/carousels",function(){return a(54808)}])},54808:function(e,s,a){"use strict";a.r(s),a.d(s,{default:function(){return B}});var l=a(85893),n=a(67294),i=a(34051),r=a(31555),t=a(52686),c=a(34289),d=a(9966),o=a(78146),m=function(e,s){let a=(0,n.useRef)(!0);(0,n.useEffect)(()=>{if(a.current){a.current=!1;return}return e()},s)},h=a(92029),u=a(94044),p=a(13551),g=a(93967),j=a.n(g),x=a(47150),b=a(76792);let w=n.forwardRef(({className:e,bsPrefix:s,as:a="div",...n},i)=>(s=(0,b.vE)(s,"carousel-caption"),(0,l.jsx)(a,{ref:i,className:j()(e,s),...n})));w.displayName="CarouselCaption";let N=n.forwardRef(({as:e="div",bsPrefix:s,className:a,...n},i)=>{let r=j()(a,(0,b.vE)(s,"carousel-item"));return(0,l.jsx)(e,{ref:i,...n,className:r})});N.displayName="CarouselItem";var C=a(53439),k=a(93825),f=a(34509),S=a(9337);let Z=n.forwardRef(({defaultActiveIndex:e=0,...s},a)=>{let i;let{as:r="div",bsPrefix:t,slide:c=!0,fade:d=!1,controls:g=!0,indicators:w=!0,indicatorLabels:N=[],activeIndex:Z,onSelect:v,onSlide:y,onSlid:T,interval:I=5e3,keyboard:E=!0,onKeyDown:B,pause:R="hover",onMouseOver:H,onMouseOut:_,wrap:$=!0,touch:F=!0,onTouchStart:D,onTouchMove:M,onTouchEnd:O,prevIcon:A=(0,l.jsx)("span",{"aria-hidden":"true",className:"carousel-control-prev-icon"}),prevLabel:L="Previous",nextIcon:P=(0,l.jsx)("span",{"aria-hidden":"true",className:"carousel-control-next-icon"}),nextLabel:X="Next",variant:G,className:U,children:K,...W}=(0,x.Ch)({defaultActiveIndex:e,...s},{activeIndex:"onSelect"}),q=(0,b.vE)(t,"carousel"),z=(0,b.SC)(),J=(0,n.useRef)(null),[Q,V]=(0,n.useState)("next"),[Y,ee]=(0,n.use
1State)(!1),[es,ea]=(0,n.useState)(!1),[el,en]=(0,n.useState)(Z||0);(0,n.useEffect)(()=>{es||Z===el||(J.current?V(J.current):V((Z||0)>el?"next":"prev"),c&&ea(!0),en(Z||0))},[Z,es,el,c]),(0,n.useEffect)(()=>{J.current&&(J.current=null)});let ei=0;(0,C.Ed)(K,(e,s)=>{++ei,s===Z&&(i=e.props.interval)});let er=(0,h.Z)(i),et=(0,n.useCallback)(e=>{if(es)return;let s=el-1;if(s<0){if(!$)return;s=ei-1}J.current="prev",null==v||v(s,e)},[es,el,v,$,ei]),ec=(0,o.Z)(e=>{if(es)return;let s=el+1;if(s>=ei){if(!$)return;s=0}J.current="next",null==v||v(s,e)}),ed=(0,n.useRef)();(0,n.useImperativeHandle)(a,()=>({element:ed.current,prev:et,next:ec}));let eo=(0,o.Z)(()=>{!document.hidden&&function(e){if(!e||!e.style||!e.parentNode||!e.parentNode.style)return!1;let s=getComputedStyle(e);return"none"!==s.display&&"hidden"!==s.visibility&&"none"!==getComputedStyle(e.parentNode).display}(ed.current)&&(z?et():ec())}),em="next"===Q?"start":"end";m(()=>{c||(null==y||y(el,em),null==T||T(el,em))},[el]);let eh=`${q}-item-${Q}`,eu=`${q}-item-${em}`,ep=(0,n.useCallback)(e=>{(0,f.Z)(e),null==y||y(el,em)},[y,el,em]),eg=(0,n.useCallback)(()=>{ea(!1),null==T||T(el,em)},[T,el,em]),ej=(0,n.useCallback)(e=>{if(E&&!/input|textarea/i.test(e.target.tagName))switch(e.key){case"ArrowLeft":e.preventDefault(),z?ec(e):et(e);return;case"ArrowRight":e.preventDefault(),z?et(e):ec(e);return}null==B||B(e)},[E,B,et,ec,z]),ex=(0,n.useCallback)(e=>{"hover"===R&&ee(!0),null==H||H(e)},[R,H]),eb=(0,n.useCallback)(e=>{ee(!1),null==_||_(e)},[_]),ew=(0,n.useRef)(0),eN=(0,n.useRef)(0),eC=(0,u.Z)(),ek=(0,n.useCallback)(e=>{ew.current=e.touches[0].clientX,eN.current=0,"hover"===R&&ee(!0),null==D||D(e)},[R,D]),ef=(0,n.useCallback)(e=>{e.touches&&e.touches.length>1?eN.current=0:eN.current=e.touches[0].clientX-ew.current,null==M||M(e)},[M]),eS=(0,n.useCallback)(e=>{if(F){let s=eN.current;Math.abs(s)>40&&(s>0?et(e):ec(e))}"hover"===R&&eC.set(()=>{ee(!1)},I||void 0),null==O||O(e)},[F,R,et,ec,eC,I,O]),eZ=null!=I&&!Y&&!es,ev=(0,n.useRef)();(0,n.useEffect)(()=>{var e,s;if(eZ)return ev.current=window.setInterval(document.visibilityState?eo:z?et:ec,null!=(e=null!=(s=er.current)?s:I)?e:void 0),()=>{null!==ev.current&&clearInterval(ev.current)}},[eZ,et,ec,er,I,eo,z]);let ey=(0,n.useMemo)(()=>w&&Array.from({length:ei},(e,s)=>e=>{null==v||v(s,e)}),[w,ei,v]);return(0,l.jsxs)(r,{ref:ed,...W,onKeyDown:ej,onMouseOver:ex,onMouseOut:eb,onTouchStart:ek,onTouchMove:ef,onTouchEnd:eS,className:j()(U,q,c&&"slide",d&&`${q}-fade`,G&&`${q}-${G}`),children:[w&&(0,l.jsx)("div",{className:`${q}-indicators`,children:(0,C.UI)(K,(e,s)=>(0,l.jsx)("button",{type:"button","data-bs-target":"","aria-label":null!=N&&N.length?N[s]:`Slide ${s+1}`,className:s===el?"active":void 0,onClick:ey?ey[s]:void 0,"aria-current":s===el},s))}),(0,l.jsx)("div",{className:`${q}-inner`,children:(0,C.UI)(K,(e,s)=>{let a=s===el;return c?(0,l.jsx)(S.Z,{in:a,onEnter:a?ep:void 0,onEntered:a?eg:void 0,addEndListener:k.Z,children:(s,l)=>n.cloneElement(e,{...l,className:j()(e.props.className,a&&"entered"!==s&&eh,("entered"===s||"exiting"===s)&&"active",("entering"===s||"exiting"===s)&&eu)})}):n.cloneElement(e,{className:j()(e.props.className,a&&"active")})})}),g&&(0,l.jsxs)(l.Fragment,{children:[($||0!==Z)&&(0,l.jsxs)(p.Z,{className:`${q}-control-prev`,onClick:et,children:[A,L&&(0,l.jsx)("span",{className:"visually-hidden",children:L})]}),($||Z!==ei-1)&&(0,l.jsxs)(p.Z,{className:`${q}-control-next`,onClick:ec,children:[P,X&&(0,l.jsx)("span",{className:"visually-hidden",children:X})]})]})]})});Z.displayName="Carousel";var v=Object.assign(Z,{Caption:w,Item:N}),y=a(72867),T=a(46066),I=a(33272);let E=()=>{let[e,s]=(0,n.useState)(!1),[a,o]=(0,n.useState)(!1),[m,h]=(0,n.useState)(!1),[u,p]=(0,n.useState)(!1),[g,j]=(0,n.useState)(!1),[x,b]=(0,n.useState)(!1),[w,N]=(0,n.useState)(!1),[C,k]=(0,n.useState)(!1),[f,S]=(0,n.useState)(!1),[Z,E]=(0,n.useState)(!1),[B,R]=(0,n.useState)(!1);return(0,l.jsxs)("div",{children:[(0,l.jsx)(I.Z,{title:"Carousel"}),(0,l.jsx)(y.Z,{titles:"Carousel",active:"Carousel",items:["Advanced Elements"]}),(0,l.jsxs)(i.Z,{children:[(0,l.jsx)(r.Z,{lg:6,xl:4,children:(0,l.jsxs)(t.Z,{children:[(0,l.jsxs)(t.Z.Header,{children:[(0,l.jsx)(t.Z.Title,{as:"h3",children:"Default Carousel"}),(0,l.jsx)(c.Z,{className:"ms-auto",children:(0,l.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>s(!e),className:"showcode d-flex ms-auto mx-2"})})]}),(0,l.jsxs)(t.Z.Body,{className:"h-100",children:[(0,l.jsxs)(T.Z,{dots:!1,infinite:!0,speed:500,slidesToShow:1,slidesToScroll:1,arrows:!1,autoplay:!0,autoplaySpeed:2e3,cssEase:"linear",children:[(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/19.jpg","data-bs-holder-rendered":"true"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/20.jpg","data-bs-holder-rendered":"true"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/21.jpg","data-bs-holder-rendered":"true"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/22.jpg","data-bs-holder-rendered":"true"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/23.jpg","data-bs-holder-rendered":"true"})]}),(0,l.jsx)(d.Z,{in:e,className:"mt-2",children:(0,l.jsx)("pre",{children:(0,l.jsx)("code",{children:'\n export class DefaultCarousel extends Component {\n render() {\n const settings = {\n dots: false,\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n arrows: fal
1se,\n autoplay: true,\n autoplaySpeed: 2000,\n cssEase: "linear",\n };\n return (\n <div>\n <Slider {...settings}>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/19.jpg"} data-bs-holder-rendered="true" />\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/20.jpg"} data-bs-holder-rendered="true" />\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/21.jpg"} data-bs-holder-rendered="true" />\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/22.jpg"} data-bs-holder-rendered="true" />\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/23.jpg"} data-bs-holder-rendered="true" />\n\n </Slider>\n </div>\n );\n }\n}\n\n'})})})]})]})}),(0,l.jsx)(r.Z,{lg:6,xl:4,children:(0,l.jsxs)(t.Z,{children:[(0,l.jsxs)(t.Z.Header,{children:[(0,l.jsx)(t.Z.Title,{as:"h3",children:"Carousel with indicators"}),(0,l.jsx)(c.Z,{className:"ms-auto",children:(0,l.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>o(!a),className:"showcode d-flex ms-auto mx-2"})})]}),(0,l.jsxs)(t.Z.Body,{className:"h-100",children:[(0,l.jsxs)(T.Z,{dots:!0,infinite:!0,speed:500,slidesToShow:1,slidesToScroll:1,arrows:!1,autoplay:!0,autoplaySpeed:2e3,cssEase:"linear",children:[(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/24.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/25.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/1.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/2.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/3.jpg"})]}),(0,l.jsx)(d.Z,{in:a,className:"mt-2",children:(0,l.jsx)("pre",{children:(0,l.jsx)("code",{children:'\n export class CarouselwithIndicator extends Component {\n render() {\n const settings = {\n dots: true,\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n arrows: false,\n autoplay: true,\n autoplaySpeed: 2000,\n cssEase: "linear"\n };\n return (\n <div>\n <Slider {...settings}>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/24.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/25.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/1.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/2.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/3.jpg"}/>\n </Slider>\n </div>\n );\n }\n}\n'})})})]})]})}),(0,l.jsx)(r.Z,{lg:6,xl:4,children:(0,l.jsxs)(t.Z,{children:[(0,l.jsxs)(t.Z.Header,{children:[(0,l.jsx)(t.Z.Title,{as:"h3",children:"Carousel with controls"}),(0,l.jsx)(c.Z,{className:"ms-auto",children:(0,l.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>h(!m),className:"showcode d-flex ms-auto mx-2"})})]}),(0,l.jsxs)(t.Z.Body,{className:"h-100",children:[(0,l.jsxs)(T.Z,{dots:!1,infinite:!0,speed:500,slidesToShow:1,slidesToScroll:1,arrows:!0,autoplay:!1,autoplaySpeed:2e3,cssEase:"linear",children:[(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/4.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/5.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/6.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/7.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/8.jpg"})]}),(0,l.jsx)(d.Z,{in:m,className:"mt-2",children:(0,l.jsx)("pre",{children:(0,l.jsx)("code",{children:'\n export class CarouselwithControls extends Component {\n render() {\n const settings = {\n dots: false,\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n arrows: true,\n autoplay: false,\n autoplaySpeed: 2000,\n cssEase: "linear"\n };\n return (\n <div>\n <Slider {...settings}>\n \n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/4.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/5.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/6.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/7.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/8.jpg"}/>\n\n\n </Slider>\n </div>\n );\n }\n}\n\n'})})})]})]})}),(0,l.jsx)(r.Z,{lg:6,xl:4,children:(0,l.jsxs)(t.Z,{children:[(0,l.jsxs)(t.Z.Header,{children:[(0,l.jsx)(t.Z.Title,{as:"h3",children:"Carousel with captions"}),(0,l.jsx)(c.Z,{className:"ms-auto",children:(0,l.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>p(!u),className:"showcode d-flex ms-auto mx-2"})})]}),(0,l.jsxs)(t.Z.Body,{className:"h-100",children:[(0,l.jsxs)(v,{children:[(0,l.jsxs)(v.Item,{children:[(0,l.jsx)("img",{className:"d-block w-100 br-5 active",src:"../../../assets/images/media/9.jpg",alt:"First slide"}),(0,l.jsxs)(v.Caption,{children:[(0,l.jsx)("h3",{children:"Slide label"}),(0,l.jsx)("p",{children:"Secure other greater pleasures"})]})]}),(0,l.jsxs)(v.Item,{children:[(0,l.jsx)("img",{className:"d-block w-100 br-5",src:"../../../assets/images/media/10.jpg",alt:"Second slide"}),(0,l.jsxs)(v.Caption,{children:[(0,l.jsx)("h3",{children:"Slide label"}),(0,l.jsx)("p",{children:"Secure other greater pleasures"})]})]}),(0,l.jsxs)(v.Item,{children:[(0,l.jsx)("img",{className:"d-block w-100 br-5",src:"../../../assets/images/media/11.jpg",alt:"Third slide"}),(0,l.jsxs)(v.Caption,{children:[(0,l.jsx)("h3",{children:"Slide label"}),(0,l.jsx)("p",{children:"Secure other greater pleasures"})]})]}),(0,l.jsxs)(v.Item,{children:[(0,l.jsx)("img",{className:"d-block w-100 br-5",src:"../../../assets/images/media/12.jpg",alt:"Third slide"}),(0,l.jsxs)(v.Caption,{children:[(0,l.jsx)("h3",{children:"Slide label"}),(0,l.jsx)("p",{children:"Secure other greater pleasures"})]})]}),(0,l.jsxs)(v.Item,{children:[(0,l.jsx)("img",{className:"d-block w-100 br-5",src:"../../../assets/images/media/13.jpg",alt:"Third slide"}),(0,l.jsxs)(v.Caption,{children:[(0,l.jsx)("h3",{children:"Slide label"}),(0,l.jsx)("p",{children:"Secure other greater pleasures"})]})]})]}),(0,l.jsx)(d.Z,{in:u,className:"mt-2",children:(0,l.jsx)("pre",{children:(0,l.jsx)("code",{children:'\n export function CarouselwithCaption() {\
1n\n return (\n<Carousel>\n <Carousel.Item>\n <img\n className="d-block w-100 br-5 active"\n src={"../../../assets/images/media/9.jpg"}\n alt="First slide"\n />\n <Carousel.Caption>\n <h3>Slide label</h3>\n <p>Secure other greater pleasures</p>\n </Carousel.Caption>\n </Carousel.Item>\n <Carousel.Item>\n <img\n className="d-block w-100 br-5"\n src={"../../../assets/images/media/10.jpg"}\n alt="Second slide"\n />\n\n <Carousel.Caption>\n <h3>Slide label</h3>\n <p>Secure other greater pleasures</p>\n </Carousel.Caption>\n </Carousel.Item>\n <Carousel.Item>\n <img\n className="d-block w-100 br-5"\n src={"../../../assets/images/media/11.jpg"}\n alt="Third slide"\n />\n \n <Carousel.Caption>\n <h3>Slide label</h3>\n <p>Secure other greater pleasures</p>\n </Carousel.Caption>\n </Carousel.Item>\n <Carousel.Item>\n <img\n className="d-block w-100 br-5"\n src={"../../../assets/images/media/12.jpg"}\n alt="Third slide"\n />\n \n <Carousel.Caption>\n <h3>Slide label</h3>\n <p>Secure other greater pleasures</p>\n </Carousel.Caption>\n </Carousel.Item>\n <Carousel.Item>\n <img\n className="d-block w-100 br-5"\n src={"../../../assets/images/media/13.jpg"}\n alt="Third slide"\n />\n \n <Carousel.Caption>\n <h3>Slide label</h3>\n <p>Secure other greater pleasures</p>\n </Carousel.Caption>\n </Carousel.Item>\n</Carousel>\n)\n}\n\n'})})})]})]})}),(0,l.jsx)(r.Z,{lg:6,xl:4,children:(0,l.jsxs)(t.Z,{children:[(0,l.jsxs)(t.Z.Header,{children:[(0,l.jsx)(t.Z.Title,{as:"h3",children:"Carousel with top indicators"}),(0,l.jsx)(c.Z,{className:"ms-auto",children:(0,l.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>j(!g),className:"showcode d-flex ms-auto mx-2"})})]}),(0,l.jsxs)(t.Z.Body,{className:"h-100",children:[(0,l.jsx)("div",{id:"carousel-indicators1",className:"carousel slide","data-bs-ride":"carousel",children:(0,l.jsx)("div",{className:"Top",children:(0,l.jsxs)(T.Z,{dots:!0,infinite:!0,speed:500,slidesToShow:1,slidesToScroll:1,arrows:!1,autoplay:!0,autoplaySpeed:2e3,cssEase:"linear",children:[(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/14.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/15.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/16.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/17.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/18.jpg"})]})})}),(0,l.jsx)(d.Z,{in:g,className:"mt-2",children:(0,l.jsx)("pre",{children:(0,l.jsx)("code",{children:'\n export class CarouselwithTopIndicator extends Component {\n render() {\n const settings = {\n dots: true,\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n arrows: false,\n autoplay: true,\n autoplaySpeed: 2000,\n cssEase: "linear"\n };\n return (\n <div className="Top">\n <Slider {...settings}>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/14.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/15.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/16.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/17.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/18.jpg"}/>\n </Slider>\n </div>\n );\n }\n}\n\n'})})})]})]})}),(0,l.jsx)(r.Z,{lg:6,xl:4,children:(0,l.jsxs)(t.Z,{children:[(0,l.jsxs)(t.Z.Header,{children:[(0,l.jsx)(t.Z.Title,{as:"h3",children:"Carousel with top-right indicators"}),(0,l.jsx)(c.Z,{className:"ms-auto",children:(0,l.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>b(!x),className:"showcode d-flex ms-auto mx-2"})})]}),(0,l.jsxs)(t.Z.Body,{className:"h-100",children:[(0,l.jsx)("div",{id:"carousel-indicators2",className:"carousel slide","data-bs-ride":"carousel",children:(0,l.jsx)("div",{className:"Top-right",children:(0,l.jsxs)(T.Z,{dots:!0,infinite:!0,speed:500,slidesToShow:1,slidesToScroll:1,arrows:!1,autoplay:!0,autoplaySpeed:2e3,cssEase:"linear",children:[(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/19.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/20.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/21.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/22.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/23.jpg"})]})})}),(0,l.jsx)(d.Z,{in:x,className:"mt-2",children:(0,l.jsx)("pre",{children:(0,l.jsx)("code",{children:'\n export class CarouselwithTopRightIndicator extends Component {\n render() {\n const settings = {\n dots: true,\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n arrows: fal
1se,\n autoplay: true,\n autoplaySpeed: 2000,\n cssEase: "linear"\n };\n return (\n <div className="Top-right">\n <Slider {...settings}>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/19.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/20.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/21.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/22.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/23.jpg"}/>\n </Slider>\n </div>\n );\n }\n}\n\n'})})})]})]})})]}),(0,l.jsxs)(i.Z,{children:[(0,l.jsx)(r.Z,{lg:6,xl:4,children:(0,l.jsxs)(t.Z,{children:[(0,l.jsxs)(t.Z.Header,{children:[(0,l.jsx)(t.Z.Title,{as:"h3",children:"Carousel with top-left indicators"}),(0,l.jsx)(c.Z,{className:"ms-auto",children:(0,l.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>N(!w),className:"showcode d-flex ms-auto mx-2"})})]}),(0,l.jsxs)(t.Z.Body,{className:"h-100",children:[(0,l.jsx)("div",{id:"carousel-indicators3",className:"carousel slide","data-bs-ride":"carousel",children:(0,l.jsx)("div",{className:"Top-left",children:(0,l.jsxs)(T.Z,{dots:!0,infinite:!0,speed:500,slidesToShow:1,slidesToScroll:1,arrows:!1,autoplay:!0,autoplaySpeed:2e3,cssEase:"linear",children:[(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/24.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/25.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/1.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/2.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/3.jpg"})]})})}),(0,l.jsx)(d.Z,{in:w,className:"mt-2",children:(0,l.jsx)("pre",{children:(0,l.jsx)("code",{children:'\n export class CarouselwithTopLeftIndicator extends Component {\n render() {\n const settings = {\n dots: true,\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n arrows: false,\n autoplay: true,\n autoplaySpeed: 2000,\n cssEase: "linear"\n };\n return (\n <div className="Top-left">\n <Slider {...settings}>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/24.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/25.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/1.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/2.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/3.jpg"}/>\n </Slider>\n </div>\n );\n }\n}\n\n'})})})]})]})}),(0,l.jsx)(r.Z,{lg:6,xl:4,children:(0,l.jsxs)(t.Z,{children:[(0,l.jsxs)(t.Z.Header,{children:[(0,l.jsx)(t.Z.Title,{as:"h3",children:"Carousel with bottom-right indicators"}),(0,l.jsx)(c.Z,{className:"ms-auto",children:(0,l.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>k(!C),className:"showcode d-flex ms-auto mx-2"})})]}),(0,l.jsxs)(t.Z.Body,{className:"h-100",children:[(0,l.jsx)("div",{id:"carousel-indicators4",className:"carousel slide","data-bs-ride":"carousel",children:(0,l.jsxs)(T.Z,{dots:!0,infinite:!0,speed:500,slidesToShow:1,slidesToScroll:1,arrows:!1,autoplay:!0,autoplaySpeed:2e3,cssEase:"linear",children:[(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/4.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/5.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/6.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/7.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/8.jpg"})]})}),(0,l.jsx)(d.Z,{in:C,className:"mt-2",children:(0,l.jsx)("pre",{children:(0,l.jsx)("code",{children:'\n export class CarouselwithbottomRightIndicator extends Component {\n render() {\n const settings = {\n dots: true,\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n arrows: fal
1se,\n autoplay: true,\n autoplaySpeed: 2000,\n cssEase: "linear"\n };\n return (\n <div className="bottom-right">\n <Slider {...settings}>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/4.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/5.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/6.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/7.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/8.jpg"}/>\n </Slider>\n </div>\n );\n }\n}\n\n'})})})]})]})}),(0,l.jsx)(r.Z,{lg:6,xl:4,children:(0,l.jsxs)(t.Z,{children:[(0,l.jsxs)(t.Z.Header,{children:[(0,l.jsx)(t.Z.Title,{as:"h3",children:"Carousel with bottom-left indicators"}),(0,l.jsx)(c.Z,{className:"ms-auto",children:(0,l.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>S(!f),className:"showcode d-flex ms-auto mx-2"})})]}),(0,l.jsxs)(t.Z.Body,{className:"h-100",children:[(0,l.jsx)("div",{id:"carousel-indicators5",className:"carousel slide","data-bs-ride":"carousel",children:(0,l.jsxs)(T.Z,{dots:!0,infinite:!0,speed:500,slidesToShow:1,slidesToScroll:1,arrows:!1,autoplay:!0,autoplaySpeed:2e3,cssEase:"linear",children:[(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/9.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/10.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/11.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/12.jpg"}),(0,l.jsx)("img",{className:"d-block w-100 br-5",alt:"",src:"../../../assets/images/media/13.jpg"})]})}),(0,l.jsx)(d.Z,{in:f,className:"mt-2",children:(0,l.jsx)("pre",{children:(0,l.jsx)("code",{children:'\n export class CarouselwithbottomLeftIndicator extends Component {\n render() {\n const settings = {\n dots: true,\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n arrows: false,\n autoplay: true,\n autoplaySpeed: 2000,\n cssEase: "linear"\n };\n return (\n <div className="bottom-left">\n <Slider {...settings}>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/9.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/10.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/11.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/12.jpg"}/>\n\n <img className="d-block w-100 br-5" alt="" src={"../../../assets/images/media/13.jpg"}/>\n </Slider>\n </div>\n );\n }\n}\n\n'})})})]})]})}),(0,l.jsx)("div",{className:"col-md-12 col-lg-6",children:(0,l.jsxs)(t.Z,{children:[(0,l.jsxs)(t.Z.Header,{children:[(0,l.jsx)(t.Z.Title,{as:"h3",children:"Carousel with Background color captions"}),(0,l.jsx)(c.Z,{className:"ms-auto",children:(0,l.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>E(!Z),className:"showcode d-flex ms-auto mx-2"})})]}),(0,l.jsxs)(t.Z.Body,{className:"h-100",children:[(0,l.jsxs)(v,{children:[(0,l.jsxs)(v.Item,{children:[(0,l.jsx)("img",{className:"d-block w-100 br-5 active",src:"../../../assets/images/media/backgrounds/3.jpg",alt:"First slide"}),(0,l.jsxs)(v.Caption,{children:[(0,l.jsx)("h3",{children:"Slide label"}),(0,l.jsx)("p",{children:"The wise man therefore always holds in these matters to this principle of selection he rejects pleasures."})]})]}),(0,l.jsxs)(v.Item,{children:[(0,l.jsx)("img",{className:"d-block w-100 br-5",src:"../../../assets/images/media/backgrounds/1.jpg",alt:"Second slide"}),(0,l.jsxs)(v.Caption,{children:[(0,l.jsx)("h3",{children:"Slide label"}),(0,l.jsx)("p",{children:"The wise man therefore always holds in these matters to this principle of selection he rejects pleasures."})]})]}),(0,l.jsxs)(v.Item,{children:[(0,l.jsx)("img",{className:"d-block w-100 br-5",src:"../../../assets/images/media/backgrounds/2.jpg",alt:"Third slide"}),(0,l.jsxs)(v.Caption,{children:[(0,l.jsx)("h3",{children:"Slide label"}),(0,l.jsx)("p",{children:"The wise man therefore always holds in these matters to this principle of selection he rejects pleasures."})]})]})]}),(0,l.jsx)(d.Z,{in:Z,className:"mt-2",children:(0,l.jsx)("pre",{children:(0,l.jsx)("code",{children:'\nexport function CarouselwithBackgroun
1dColorCaption() {\n\n return (\n<Carousel>\n <Carousel.Item>\n <img\n className="d-block w-100 br-5 active"\n src={"../../../assets/images/media/backgrounds/3.jpg"}\n alt="First slide"\n />\n <Carousel.Caption>\n <h3>Slide label</h3>\n <p>The wise man therefore always holds in these matters to this principle of selection he rejects pleasures.</p>\n </Carousel.Caption>\n </Carousel.Item>\n <Carousel.Item>\n <img\n className="d-block w-100 br-5"\n src={"../../../assets/images/media/backgrounds/1.jpg"}\n alt="Second slide"\n />\n\n <Carousel.Caption>\n <h3>Slide label</h3>\n <p>The wise man therefore always holds in these matters to this principle of selection he rejects pleasures.</p>\n </Carousel.Caption>\n </Carousel.Item>\n <Carousel.Item>\n <img\n className="d-block w-100 br-5"\n src={"../../../assets/images/media/backgrounds/2.jpg"}\n alt="Third slide"\n />\n \n <Carousel.Caption>\n <h3>Slide label</h3>\n <p>The wise man therefore always holds in these matters to this principle of selection he rejects pleasures.</p>\n </Carousel.Caption>\n </Carousel.Item>\n</Carousel>\n)\n}\n'})})})]})]})}),(0,l.jsx)("div",{className:"col-md-12 col-lg-6",children:(0,l.jsxs)(t.Z,{children:[(0,l.jsxs)(t.Z.Header,{children:[(0,l.jsx)(t.Z.Title,{as:"h3",children:"Carousel with GradientBackground caption"}),(0,l.jsx)(c.Z,{className:"ms-auto",children:(0,l.jsx)(c.Z.Check,{type:"switch",label:"Show Code",id:"custom-switch",onClick:()=>R(!B),className:"showcode d-flex ms-auto mx-2"})})]}),(0,l.jsxs)(t.Z.Body,{className:"h-100",children:[(0,l.jsxs)(v,{children:[(0,l.jsxs)(v.Item,{children:[(0,l.jsx)("img",{className:"d-block w-100 br-5 active",src:"../../../assets/images/media/backgrounds/4.jpg",alt:"First slide"}),(0,l.jsxs)(v.Caption,{children:[(0,l.jsx)("h3",{children:"Slide label"}),(0,l.jsx)("p",{children:"The wise man therefore always holds in these matters to this principle of selection he rejects pleasures."})]})]}),(0,l.jsxs)(v.Item,{children:[(0,l.jsx)("img",{className:"d-block w-100 br-5",src:"../../../assets/images/media/backgrounds/5.jpg",alt:"Second slide"}),(0,l.jsxs)(v.Caption,{children:[(0,l.jsx)("h3",{children:"Slide label"}),(0,l.jsx)("p",{children:"The wise man therefore always holds in these matters to this principle of selection he rejects pleasures."})]})]}),(0,l.jsxs)(v.Item,{children:[(0,l.jsx)("img",{className:"d-block w-100 br-5",src:"../../../assets/images/media/backgrounds/6.jpg",alt:"Third slide"}),(0,l.jsxs)(v.Caption,{children:[(0,l.jsx)("h3",{children:"Slide label"}),(0,l.jsx)("p",{children:"The wise man therefore always holds in these matters to this principle of selection he rejects pleasures."})]})]})]}),(0,l.jsx)(d.Z,{in:B,className:"mt-2",children:(0,l.jsx)("pre",{children:(0,l.jsx)("code",{children:'\n export function CarouselwithGradientBackgroundCaption() {\n\n return (\n<Carousel>\n <Carousel.Item>\n <img\n className="d-block w-100 br-5 active"\n src={"../../../assets/images/media/backgrounds/4.jpg"}\n alt="First slide"\n />\n <Carousel.Caption>\n <h3>Slide label</h3>\n <p>The wise man therefore always holds in these matters to this principle of selection he rejects pleasures.</p>\n </Carousel.Caption>\n </Carousel.Item>\n <Carousel.Item>\n <img\n className="d-block w-100 br-5"\n src={"../../../assets/images/media/backgrounds/5.jpg"}\n alt="Second slide"\n />\n\n <Carousel.Caption>\n <h3>Slide label</h3>\n <p>The wise man therefore always holds in these matters to this principle of selection he rejects pleasures.</p>\n </Carousel.Caption>\n </Carousel.Item>\n <Carousel.Item>\n <img\n className="d-block w-100 br-5"\n src={"../../../assets/images/media/backgrounds/6.jpg"}\n alt="Third slide"\n />\n \n <Carousel.Caption>\n <h3>Slide label</h3>\n <p>The wise man therefore always holds in these matters to this principle of selection he rejects pleasures.</p>\n </Carousel.Caption>\n </Carousel.Item>\n</Carousel>\n)\n}\n\n'})})})]})]})})]})]})};E.layout="Contentlayout";var B=E},72867:function(e,s,a){"use strict";var l=a(85893);a(67294);var n=a(26699);let i=e=>(0,l.jsx)("div",{children:(0,l.jsxs)("div",{className:"page-header",children:[(0,l.jsx)("h1",{className:"page-title",children:e.titles}),(0,l.jsx)("div",{children:(0,l.jsxs)(n.Z,{children:[e.items.map((e,s)=>(0,l.jsx)(n.Z.Item,{href:"#!",children:e},s)),(0,l.jsx)(n.Z.Item,{href:"#!",active:!0,children:e.active})]})})]})});s.Z=i},33272:function(e,s,a){"use strict";a.d(s,{Z:function(){return c}});var l=a(85893);a(67294);var n=a(9008),i=a.n(n),r={src:"/_next/static/media/favicon.00e6795d.ico",height:16,width:16,blurWidth:0,blurHeight:0};let t=e=>{let{title:s}=e;return(0,l.jsxs)(i(),{children:[(0,l.jsx)("title",{children:" Fandoro Technologies
1- Making Businesses Responsible"}),(0,l.jsx)("link",{rel:"icon",href:r.src}),(0,l.jsx)("meta",{name:"description",content:"Fandoro Technologies - making businesses responsible"}),(0,l.jsx)("meta",{name:"author",content:"Fandoro Technologies Private Limited"}),(0,l.jsx)("meta",{name:"keywords",content:"next js dashboard template, admin dashboard nextjs, next js admin template, next js admin panel, admin dashboard, nextjs react bootstrap, react bootstrap with next js, next js admin dashboard, nextjs admin dashboard template, admin panel template, admin template react bootstrap, nextjs dashboard,next js react bootstrap"})]})};var c=t},9008:function(e,s,a){e.exports=a(42636)},26699:function(e,s,a){"use strict";a.d(s,{Z:function(){return m}});var l=a(93967),n=a.n(l),i=a(67294),r=a(76792),t=a(13551),c=a(85893);let d=i.forwardRef(({bsPrefix:e,active:s=!1,children:a,className:l,as:i="li",linkAs:d=t.Z,linkProps:o={},href:m,title:h,target:u,...p},g)=>{let j=(0,r.vE)(e,"breadcrumb-item");return(0,c.jsx)(i,{ref:g,...p,className:n()(j,l,{active:s}),"aria-current":s?"page":void 0,children:s?a:(0,c.jsx)(d,{...o,href:m,title:h,target:u,children:a})})});d.displayName="BreadcrumbItem";let o=i.forwardRef(({bsPrefix:e,className:s,listProps:a={},children:l,label:i="breadcrumb",as:t="nav",...d},o)=>{let m=(0,r.vE)(e,"breadcrumb");return(0,c.jsx)(t,{"aria-label":i,className:s,ref:o,...d,children:(0,c.jsx)("ol",{...a,className:n()(m,null==a?void 0:a.className),children:l})})});o.displayName="Breadcrumb";var m=Object.assign(o,{Item:d})}},function(e){e.O(0,[6066,9774,2888,179],function(){return e(e.s=21925)}),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.