[{"_path":"/","_draft":false,"_partial":false,"_empty":false,"title":"","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"div","props":{"className":["flex","flex-col","sm:flex-row"]},"children":[{"type":"text","value":"\n  "},{"type":"element","tag":"div","props":{"className":["w-52"]},"children":[{"type":"text","value":"\n  "},{"type":"element","tag":"img","props":{"src":"/gitart-scroll-carousel-logo.svg","className":["m-0"]},"children":[]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n  "},{"type":"element","tag":"div","props":{"className":["flex-col","justify-center","pt-5","sm:pl-4","sm:pb-5","flex"]},"children":[{"type":"element","tag":"h1","props":{"id":"gitart-scroll-carousel-"},"children":[{"type":"text","value":"Gitart Scroll Carousel "},{"type":"element","tag":"icon","props":{"class":"text-indigo-400","name":"carbon:sailboat-coastal","size":"15"},"children":[]}]},{"type":"text","value":"\n  "},{"type":"element","tag":"div","props":{},"children":[{"type":"text","value":"\n  Scrollable, lightweight and customizable carousel component for Vue apps.\n  "}]},{"type":"text","value":"\n  "}]}]},{"type":"element","tag":"code","props":{"code":"npm i gitart-scroll-carousel\n","language":"sh"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm i gitart-scroll-carousel\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"yarn add gitart-scroll-carousel\n","language":"sh"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"yarn add gitart-scroll-carousel\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"features"},"children":[{"type":"text","value":"Features"}]},{"type":"element","tag":"list","props":{},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Native scroll support"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Drag the scroll indicator to scroll"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Customize the carousel with CSS variables"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Customize the carousel with layouts"}]}]}]},{"type":"element","tag":"h2","props":{"id":"setup"},"children":[{"type":"text","value":"Setup"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"example-docs-base","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For better performance and optimization, we have several different CSS files that can be imported on demand. For base usage, you can import the following CSS files from dist:"}]},{"type":"element","tag":"code","props":{"code":"// required styles for carousel and bottom scroll indicator\nimport 'gitart-scroll-carousel/dist/index.css'\n// arrows styles if you want use default arrows..\nimport 'gitart-scroll-carousel/dist/GSArrow.css'\n// styles of the layout you want to use. \n// read more in the layouts section.\nimport 'gitart-scroll-carousel/dist/GSLayoutNumeric.css'\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// required styles for carousel and bottom scroll indicator\nimport 'gitart-scroll-carousel/dist/index.css'\n// arrows styles if you want use default arrows..\nimport 'gitart-scroll-carousel/dist/GSArrow.css'\n// styles of the layout you want to use. \n// read more in the layouts section.\nimport 'gitart-scroll-carousel/dist/GSLayoutNumeric.css'\n"}]}]}]},{"type":"element","tag":"div","props":{"className":["bg-yellow-300","bg-opacity-30","border","border-yellow-400","text-yellow-400","px-4","py-2","rounded","relative"]},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your project supports typescript and scss, remove "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/bundled"}]},{"type":"text","value":" from the import statement. css imports is not needed, you will use not bundled components."}]},{"type":"element","tag":"code","props":{"code":"import {\n  GSCarousel,\n  GSLayoutDefault,\n} from 'gitart-scroll-carousel'\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import {\n  GSCarousel,\n  GSLayoutDefault,\n} from 'gitart-scroll-carousel'\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v1.2.0+"}]}]}]},{"type":"element","tag":"code","props":{"code":"<script>\nimport { GSCarousel, GSLayoutDefault } from 'gitart-scroll-carousel/bundled'\nimport 'gitart-scroll-carousel/dist/index.css'\nimport 'gitart-scroll-carousel/dist/GSArrow.css'\nimport 'gitart-scroll-carousel/dist/GSLayoutNumeric.css'\n\nexport default defineComponent({\n  components: {\n    GSCarousel,\n  },\n  setup() {\n    return {\n      items: [0, 1, 2, 3, 4],\n      GSLayoutDefault,\n    }\n  },\n})\n</script>\n\n<template>\n  <GSCarousel\n    :items=\"items\"\n    item-gap=\"16\"\n    :items-to-show=\"2\"\n    :layout=\"GSLayoutDefault\"\n    :layout-props=\"{\n      disableArrows: true,\n    }\"\n  >\n    <template #item=\"{ data }\">\n      <div class=\"slide\">\n        {{ data }}\n      </div>\n    </template>\n  </GSCarousel>\n</template>\n\n<style scoped>\n.slide {\n  box-shadow: 0 6px 15px -3px rgb(0 0 0/0.3);\n  padding: 25px;\n  border-radius: 5px;\n  background: rgb(202, 202, 202);\n  color: #000;\n}\n</style>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script>\nimport { GSCarousel, GSLayoutDefault } from 'gitart-scroll-carousel/bundled'\nimport 'gitart-scroll-carousel/dist/index.css'\nimport 'gitart-scroll-carousel/dist/GSArrow.css'\nimport 'gitart-scroll-carousel/dist/GSLayoutNumeric.css'\n\nexport default defineComponent({\n  components: {\n    GSCarousel,\n  },\n  setup() {\n    return {\n      items: [0, 1, 2, 3, 4],\n      GSLayoutDefault,\n    }\n  },\n})\n</script>\n\n<template>\n  <GSCarousel\n    :items=\"items\"\n    item-gap=\"16\"\n    :items-to-show=\"2\"\n    :layout=\"GSLayoutDefault\"\n    :layout-props=\"{\n      disableArrows: true,\n    }\"\n  >\n    <template #item=\"{ data }\">\n      <div class=\"slide\">\n        {{ data }}\n      </div>\n    </template>\n  </GSCarousel>\n</template>\n\n<style scoped>\n.slide {\n  box-shadow: 0 6px 15px -3px rgb(0 0 0/0.3);\n  padding: 25px;\n  border-radius: 5px;\n  background: rgb(202, 202, 202);\n  color: #000;\n}\n</style>\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"one-more-example"},"children":[{"type":"text","value":"One more example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"With "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GSLayoutNumeric"}]},{"type":"text","value":" layout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"example-base","props":{},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"h3","props":{"id":"layouts"},"children":[{"type":"text","value":"Layouts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Detailed description of the layouts can be found in the "},{"type":"element","tag":"a","props":{"href":"/layouts"},"children":[{"type":"text","value":"layouts page"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each carousel component should have a lyout.\nIt's made to be easy to customize the carousel. Or even write you own layout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"example-layout-switch","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Put the layout component in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"layout"}]},{"type":"text","value":" prop.\nLayout specific props you can put into "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"layout-props"}]},{"type":"text","value":" (learn more about them in the "},{"type":"element","tag":"a","props":{"href":"/layouts"},"children":[{"type":"text","value":"layouts page"}]},{"type":"text","value":")."}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <GSCarousel\n    :layout=\"GSLayoutDefault\"\n    :layout-props=\"{\n      disableArrows: true,\n    }\"\n  >\n  <!-- ... -->\n  </GSCarousel>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  <GSCarousel\n    :layout=\"GSLayoutDefault\"\n    :layout-props=\"{\n      disableArrows: true,\n    }\"\n  >\n  <!-- ... -->\n  </GSCarousel>\n</template>\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/layouts"},"children":[{"type":"text","value":"Layouts Details"}]}]},{"type":"element","tag":"h3","props":{"id":"css-variables"},"children":[{"type":"text","value":"CSS variables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can partially change appearance of the carousel by using css variables.\nHere is a list:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"--gsc-custom-arrow-bg"}]},{"type":"text","value":" - background color of the arrow"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"--gsc-custom-arrow-bg-hover"}]},{"type":"text","value":" - background color of the arrow when hovered"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"--gsc-custom-arrow-color"}]},{"type":"text","value":" - color of the arrow"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"--gsc-custom-indicator-bar-color"}]},{"type":"text","value":" - color of the bar below the carousel"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"--gsc-custom-indicator-track-color"}]},{"type":"text","value":" - color of the track for bar"}]},{"type":"element","tag":"h3","props":{"id":"classes"},"children":[{"type":"text","value":"Classes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Overwrite styling by yourself. Just use some classes below.\nThe package uses BEM. There is almost no inheritance."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Arrow:"}]},{"type":"element","tag":"code","props":{"code":".gsc-arrow, .gsc-arrow--side-right, .gsc-arrow--side-left\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".gsc-arrow, .gsc-arrow--side-right, .gsc-arrow--side-left\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Indicator:"}]},{"type":"element","tag":"code","props":{"code":".gsc-indicator, .gsc-indicator--scrolling\n\n.gsc-indicator__track\n\n.gsc-indicator__bar\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".gsc-indicator, .gsc-indicator--scrolling\n\n.gsc-indicator__track\n\n.gsc-indicator__bar\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"props"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"currentItem"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"Number"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nWhere the carousel is currently at.\nThere is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"update:current-item"}]},{"type":"text","value":" event that is emitted when the current item changes."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v1.2.0+"}]}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"Array"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Required"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nAn array of slider items. Each array element will be\npassed to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"#item"}]},{"type":"text","value":" slot."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"itemsToShow"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"Number"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Required"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nThe number of items to show."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"keyField"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"String"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"null"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nThe field name of the item to use as a key. Using index if field is\nnot specified."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"itemGap"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"Number | String"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"0"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nThe gap between each item."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Value '12' means 'padding: 6px;' for each item."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Value '12 20' means 'padding: 6px 10px;' for each item."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"previewSize"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"Number"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"120"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nThe visible part of the next item in the carousel."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"sticky"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"Number"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"120"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nAfter scrolling not by arrow, the carousel will stick to the current item.\nTry out in the "},{"type":"element","tag":"a","props":{"href":"/demo"},"children":[{"type":"text","value":"demo"}]},{"type":"text","value":" (select sticky checkbox and scroll the carousel)."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"ssrItemMinWidth"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"Number, String"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"null"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nCarousel item min-width on app startup when HTML is displayed,\nbut js is not loaded yet.\nIt corrects the item width in SSR mode."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"ssrItemMaxWidth"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"Number, String"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"null"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nCarousel item max-width on app startup when HTML is displayed,\nbut js is not loaded yet.\nIt corrects the item width in SSR mode."}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"slots"},"children":[{"type":"text","value":"Slots"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More control over the carousel you can find in the "},{"type":"element","tag":"a","props":{"href":"/layouts"},"children":[{"type":"text","value":"layouts page"}]},{"type":"text","value":"."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":"left"},"children":[{"type":"text","value":"Name"}]},{"type":"element","tag":"th","props":{"align":"left"},"children":[{"type":"text","value":"Description"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":"left"},"children":[{"type":"text","value":"item"}]},{"type":"element","tag":"td","props":{"align":"left"},"children":[{"type":"text","value":"slot for each carousel item"}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"item"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Scoped Data:"}]},{"type":"element","tag":"code","props":{"code":"{\n  data: any // any data from the items array\n  index: Number\n}\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n  data: any // any data from the items array\n  index: Number\n}\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"The slot is for each item of your carousel."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"data"}]},{"type":"text","value":" - current carousel item from "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"items"}]},{"type":"text","value":" props"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"index"}]},{"type":"text","value":" -  index of the current carousel item."},{"type":"element","tag":"code","props":{"code":"<GSCarousel :items=\"[1, 2, 3]\" items-to-show=\"2\">\n  <template #item=\"{ data, index }\">\n    {{ data }} | {{ index }}\n  </template>\n</GSCarousel>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<GSCarousel :items=\"[1, 2, 3]\" items-to-show=\"2\">\n  <template #item=\"{ data, index }\">\n    {{ data }} | {{ index }}\n  </template>\n</GSCarousel>\n"}]}]}]}]}]}]}]}]},"navTitle":"Home","body":{"type":"root","children":[{"type":"element","tag":"div","props":{"className":["flex","flex-col","sm:flex-row"]},"children":[{"type":"text","value":"\n  "},{"type":"element","tag":"div","props":{"className":["w-52"]},"children":[{"type":"text","value":"\n  "},{"type":"element","tag":"img","props":{"src":"/gitart-scroll-carousel-logo.svg","className":["m-0"]},"children":[]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n  "},{"type":"element","tag":"div","props":{"className":["flex-col","justify-center","pt-5","sm:pl-4","sm:pb-5","flex"]},"children":[{"type":"element","tag":"h1","props":{"id":"gitart-scroll-carousel-"},"children":[{"type":"text","value":"Gitart Scroll Carousel "},{"type":"element","tag":"icon","props":{"class":"text-indigo-400","name":"carbon:sailboat-coastal","size":"15"},"children":[]}]},{"type":"text","value":"\n  "},{"type":"element","tag":"div","props":{},"children":[{"type":"text","value":"\n  Scrollable, lightweight and customizable carousel component for Vue apps.\n  "}]},{"type":"text","value":"\n  "}]}]},{"type":"element","tag":"code","props":{"code":"npm i gitart-scroll-carousel\n","language":"sh"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"npm i gitart-scroll-carousel"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"yarn add gitart-scroll-carousel\n","language":"sh"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"yarn add gitart-scroll-carousel"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"features"},"children":[{"type":"text","value":"Features"}]},{"type":"element","tag":"list","props":{},"children":[{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Native scroll support"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Drag the scroll indicator to scroll"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Customize the carousel with CSS variables"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Customize the carousel with layouts"}]}]}]},{"type":"element","tag":"h2","props":{"id":"setup"},"children":[{"type":"text","value":"Setup"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"example-docs-base","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For better performance and optimization, we have several different CSS files that can be imported on demand. For base usage, you can import the following CSS files from dist:"}]},{"type":"element","tag":"code","props":{"code":"// required styles for carousel and bottom scroll indicator\nimport 'gitart-scroll-carousel/dist/index.css'\n// arrows styles if you want use default arrows..\nimport 'gitart-scroll-carousel/dist/GSArrow.css'\n// styles of the layout you want to use. \n// read more in the layouts section.\nimport 'gitart-scroll-carousel/dist/GSLayoutNumeric.css'\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#7F848E"}},"children":[{"type":"text","value":"// required styles for carousel and bottom scroll indicator"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitart-scroll-carousel/dist/index.css'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#7F848E"}},"children":[{"type":"text","value":"// arrows styles if you want use default arrows.."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitart-scroll-carousel/dist/GSArrow.css'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#7F848E"}},"children":[{"type":"text","value":"// styles of the layout you want to use. "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#7F848E"}},"children":[{"type":"text","value":"// read more in the layouts section."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitart-scroll-carousel/dist/GSLayoutNumeric.css'"}]}]}]}]}]},{"type":"element","tag":"div","props":{"className":["bg-yellow-300","bg-opacity-30","border","border-yellow-400","text-yellow-400","px-4","py-2","rounded","relative"]},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your project supports typescript and scss, remove "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/bundled"}]},{"type":"text","value":" from the import statement. css imports is not needed, you will use not bundled components."}]},{"type":"element","tag":"code","props":{"code":"import {\n  GSCarousel,\n  GSLayoutDefault,\n} from 'gitart-scroll-carousel'\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"GSCarousel"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"GSLayoutDefault"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitart-scroll-carousel'"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v1.2.0+"}]}]}]},{"type":"element","tag":"code","props":{"code":"<script>\nimport { GSCarousel, GSLayoutDefault } from 'gitart-scroll-carousel/bundled'\nimport 'gitart-scroll-carousel/dist/index.css'\nimport 'gitart-scroll-carousel/dist/GSArrow.css'\nimport 'gitart-scroll-carousel/dist/GSLayoutNumeric.css'\n\nexport default defineComponent({\n  components: {\n    GSCarousel,\n  },\n  setup() {\n    return {\n      items: [0, 1, 2, 3, 4],\n      GSLayoutDefault,\n    }\n  },\n})\n</script>\n\n<template>\n  <GSCarousel\n    :items=\"items\"\n    item-gap=\"16\"\n    :items-to-show=\"2\"\n    :layout=\"GSLayoutDefault\"\n    :layout-props=\"{\n      disableArrows: true,\n    }\"\n  >\n    <template #item=\"{ data }\">\n      <div class=\"slide\">\n        {{ data }}\n      </div>\n    </template>\n  </GSCarousel>\n</template>\n\n<style scoped>\n.slide {\n  box-shadow: 0 6px 15px -3px rgb(0 0 0/0.3);\n  padding: 25px;\n  border-radius: 5px;\n  background: rgb(202, 202, 202);\n  color: #000;\n}\n</style>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"GSCarousel"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"GSLayoutDefault"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitart-scroll-carousel/bundled'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitart-scroll-carousel/dist/index.css'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitart-scroll-carousel/dist/GSArrow.css'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitart-scroll-carousel/dist/GSLayoutNumeric.css'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"defineComponent"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"components"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"GSCarousel"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"GSLayoutDefault"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"GSCarousel"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"item-gap"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"16\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"items-to-show"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"layout"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"GSLayoutDefault"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"layout-props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"disableArrows"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    }"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  >"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"item"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"{ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" }"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"slide\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"        {{ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" }}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"GSCarousel"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"scoped"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":".slide"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  box-shadow: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"15"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"-3"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"rgb"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"0.3"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  padding: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"25"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  border-radius: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  background: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"rgb"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"202"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"202"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"202"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  color: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"#000"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"one-more-example"},"children":[{"type":"text","value":"One more example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"With "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GSLayoutNumeric"}]},{"type":"text","value":" layout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"example-base","props":{},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"h3","props":{"id":"layouts"},"children":[{"type":"text","value":"Layouts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Detailed description of the layouts can be found in the "},{"type":"element","tag":"a","props":{"href":"/layouts"},"children":[{"type":"text","value":"layouts page"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each carousel component should have a lyout.\nIt's made to be easy to customize the carousel. Or even write you own layout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"example-layout-switch","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Put the layout component in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"layout"}]},{"type":"text","value":" prop.\nLayout specific props you can put into "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"layout-props"}]},{"type":"text","value":" (learn more about them in the "},{"type":"element","tag":"a","props":{"href":"/layouts"},"children":[{"type":"text","value":"layouts page"}]},{"type":"text","value":")."}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <GSCarousel\n    :layout=\"GSLayoutDefault\"\n    :layout-props=\"{\n      disableArrows: true,\n    }\"\n  >\n  <!-- ... -->\n  </GSCarousel>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"GSCarousel"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"layout"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"GSLayoutDefault"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"layout-props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"disableArrows"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    }"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  >"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  <!-- ... -->"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"GSCarousel"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/layouts"},"children":[{"type":"text","value":"Layouts Details"}]}]},{"type":"element","tag":"h3","props":{"id":"css-variables"},"children":[{"type":"text","value":"CSS variables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can partially change appearance of the carousel by using css variables.\nHere is a list:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"--gsc-custom-arrow-bg"}]},{"type":"text","value":" - background color of the arrow"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"--gsc-custom-arrow-bg-hover"}]},{"type":"text","value":" - background color of the arrow when hovered"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"--gsc-custom-arrow-color"}]},{"type":"text","value":" - color of the arrow"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"--gsc-custom-indicator-bar-color"}]},{"type":"text","value":" - color of the bar below the carousel"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"--gsc-custom-indicator-track-color"}]},{"type":"text","value":" - color of the track for bar"}]},{"type":"element","tag":"h3","props":{"id":"classes"},"children":[{"type":"text","value":"Classes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Overwrite styling by yourself. Just use some classes below.\nThe package uses BEM. There is almost no inheritance."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Arrow:"}]},{"type":"element","tag":"code","props":{"code":".gsc-arrow, .gsc-arrow--side-right, .gsc-arrow--side-left\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":".gsc-arrow"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":".gsc-arrow--side-right"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":".gsc-arrow--side-left"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Indicator:"}]},{"type":"element","tag":"code","props":{"code":".gsc-indicator, .gsc-indicator--scrolling\n\n.gsc-indicator__track\n\n.gsc-indicator__bar\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":".gsc-indicator"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":".gsc-indicator--scrolling"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":".gsc-indicator__track"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":".gsc-indicator__bar"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"props"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"currentItem"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Number"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nWhere the carousel is currently at.\nThere is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"update:current-item"}]},{"type":"text","value":" event that is emitted when the current item changes."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v1.2.0+"}]}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"items"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Array"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Required"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nAn array of slider items. Each array element will be\npassed to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"#item"}]},{"type":"text","value":" slot."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"itemsToShow"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Number"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Required"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nThe number of items to show."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"keyField"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"String"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"null"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nThe field name of the item to use as a key. Using index if field is\nnot specified."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"itemGap"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"String"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"0"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nThe gap between each item."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Value '12' means 'padding: 6px;' for each item."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Value '12 20' means 'padding: 6px 10px;' for each item."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"previewSize"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Number"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"120"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nThe visible part of the next item in the carousel."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"sticky"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Number"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"120"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nAfter scrolling not by arrow, the carousel will stick to the current item.\nTry out in the "},{"type":"element","tag":"a","props":{"href":"/demo"},"children":[{"type":"text","value":"demo"}]},{"type":"text","value":" (select sticky checkbox and scroll the carousel)."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"ssrItemMinWidth"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"String"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"null"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nCarousel item min-width on app startup when HTML is displayed,\nbut js is not loaded yet.\nIt corrects the item width in SSR mode."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"ssrItemMaxWidth"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"String"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"null"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nCarousel item max-width on app startup when HTML is displayed,\nbut js is not loaded yet.\nIt corrects the item width in SSR mode."}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"slots"},"children":[{"type":"text","value":"Slots"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More control over the carousel you can find in the "},{"type":"element","tag":"a","props":{"href":"/layouts"},"children":[{"type":"text","value":"layouts page"}]},{"type":"text","value":"."}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":"left"},"children":[{"type":"text","value":"Name"}]},{"type":"element","tag":"th","props":{"align":"left"},"children":[{"type":"text","value":"Description"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":"left"},"children":[{"type":"text","value":"item"}]},{"type":"element","tag":"td","props":{"align":"left"},"children":[{"type":"text","value":"slot for each carousel item"}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"item"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Scoped Data:"}]},{"type":"element","tag":"code","props":{"code":"{\n  data: any // any data from the items array\n  index: Number\n}\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  data: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"any"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#7F848E"}},"children":[{"type":"text","value":"// any data from the items array"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  index: "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"}"}]}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"The slot is for each item of your carousel."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"data"}]}]},{"type":"text","value":" - current carousel item from "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"items"}]}]},{"type":"text","value":" props"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"index"}]}]},{"type":"text","value":" -  index of the current carousel item."},{"type":"element","tag":"code","props":{"code":"<GSCarousel :items=\"[1, 2, 3]\" items-to-show=\"2\">\n  <template #item=\"{ data, index }\">\n    {{ data }} | {{ index }}\n  </template>\n</GSCarousel>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFFFFF"}},"children":[{"type":"text","value":"GSCarousel"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":":items"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"[1, 2, 3]\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"items-to-show"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"2\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"#item"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"{ data, index }\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    {{ data }} | {{ index }}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFFFFF"}},"children":[{"type":"text","value":"GSCarousel"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]}]}]}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"features","depth":2,"text":"Features"},{"id":"setup","depth":2,"text":"Setup","children":[{"id":"one-more-example","depth":3,"text":"One more example"}]},{"id":"theming","depth":2,"text":"Theming","children":[{"id":"layouts","depth":3,"text":"Layouts"},{"id":"css-variables","depth":3,"text":"CSS variables"},{"id":"classes","depth":3,"text":"Classes"},{"id":"props","depth":3,"text":"Props"},{"id":"slots","depth":3,"text":"Slots"}]}]}},"_type":"markdown","_id":"content:1.index.md","_source":"content","_file":"1.index.md","_extension":"md"},{"_path":"/demo","_draft":false,"_partial":false,"_empty":false,"title":"Demo","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"demo"},"children":[{"type":"text","value":"Demo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"demo-with-controls","props":{},"children":[]}]}]},"navTitle":"Demo","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"demo"},"children":[{"type":"text","value":"Demo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"demo-with-controls","props":{},"children":[]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:2.demo.md","_source":"content","_file":"2.demo.md","_extension":"md"},{"_path":"/layouts","_draft":false,"_partial":false,"_empty":false,"title":"Carousel Layouts","description":"To make carousel more flexible, I created layout system.\nYou need to pass layout prop to define how the carousel should look like.\nAnd optionally you can pass layout-props prop to pass some props to the specific layout.","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"carousel-layouts"},"children":[{"type":"text","value":"Carousel Layouts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To make carousel more flexible, I created layout system.\nYou need to pass "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"layout"}]},{"type":"text","value":" prop to define how the carousel should look like.\nAnd optionally you can pass "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"layout-props"}]},{"type":"text","value":" prop to pass some props to the specific layout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"example-layout-switch","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Put the layout component in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"layout"}]},{"type":"text","value":" prop. You can also pass layout props there:"}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <GSCarousel\n    :layout=\"GSLayoutNumeric\"\n    :layout-props=\"{\n      disableArrows: true,\n    }\"\n  >\n  <!-- ... -->\n  </GSCarousel>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  <GSCarousel\n    :layout=\"GSLayoutNumeric\"\n    :layout-props=\"{\n      disableArrows: true,\n    }\"\n  >\n  <!-- ... -->\n  </GSCarousel>\n</template>\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"pre-defined-layouts"},"children":[{"type":"text","value":"Pre-defined layouts"}]},{"type":"element","tag":"h3","props":{"id":"examplelayoutdefault"},"children":[{"type":"text","value":"ExampleLayoutDefault"}]},{"type":"element","tag":"code","props":{"code":"import { GSCarousel, GSLayoutDefault } from 'gitart-scroll-carousel/bundled'\nimport 'gitart-scroll-carousel/dist/index.css'\nimport 'gitart-scroll-carousel/dist/GSArrow.css' \nimport 'gitart-scroll-carousel/dist/ExampleLayoutDefault.css'\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { GSCarousel, GSLayoutDefault } from 'gitart-scroll-carousel/bundled'\nimport 'gitart-scroll-carousel/dist/index.css'\nimport 'gitart-scroll-carousel/dist/GSArrow.css' \nimport 'gitart-scroll-carousel/dist/ExampleLayoutDefault.css'\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GSArrow.css"}]},{"type":"text","value":" is unnecessary if "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"disableArrows=true"}]}]},{"type":"element","tag":"h4","props":{"id":"appearrance"},"children":[{"type":"text","value":"Appearrance:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"example-layout-default","props":{},"children":[]}]},{"type":"element","tag":"h4","props":{"id":"props"},"children":[{"type":"text","value":"Props:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"disableArrows"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"Boolean"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"false"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nDisabled arrows on both sides of the carousel."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"gslayoutnumeric"},"children":[{"type":"text","value":"GSLayoutNumeric"}]},{"type":"element","tag":"code","props":{"code":"import { GSCarousel, GSLayoutDefault } from 'gitart-scroll-carousel/bundled'\nimport 'gitart-scroll-carousel/dist/index.css'\nimport 'gitart-scroll-carousel/dist/GSArrow.css' \nimport 'gitart-scroll-carousel/dist/GSLayoutNumeric.css'\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"import { GSCarousel, GSLayoutDefault } from 'gitart-scroll-carousel/bundled'\nimport 'gitart-scroll-carousel/dist/index.css'\nimport 'gitart-scroll-carousel/dist/GSArrow.css' \nimport 'gitart-scroll-carousel/dist/GSLayoutNumeric.css'\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GSArrow.css"}]},{"type":"text","value":" is unnecessary if "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"disableArrows=true"}]}]},{"type":"element","tag":"h4","props":{"id":"appearrance-1"},"children":[{"type":"text","value":"Appearrance:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"example-layout-numeric","props":{},"children":[]}]},{"type":"element","tag":"h4","props":{"id":"props-1"},"children":[{"type":"text","value":"Props:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"disableArrows"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"Boolean"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"false"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nDisable arrows on bootom of the carousel."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"disableCounter"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"Boolean"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"false"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nDisables counter on bootom of the carousel."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"percentCounter"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"Boolean"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"false"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nShow counter number depends how much percent of the carousel is scrolled.\nHelpful when you have many slides."}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"custom-layout"},"children":[{"type":"text","value":"Custom layout"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"How pre-defined layouts are made you can see "},{"type":"element","tag":"a","props":{"href":"https://github.com/gitart-group/scroll-carousel/tree/main/src/components/layouts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Our layouts can accept few props and slots from the GSCarousel."}]},{"type":"element","tag":"h4","props":{"id":"props-2"},"children":[{"type":"text","value":"Props:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"onMove"}]},{"type":"text","value":" - method to move the carousel. pass 1 or -1 to move the carousel."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"disabledSide"}]},{"type":"text","value":" - "},{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"'left' | 'right' | 'none'"}]},{"type":"text","value":" - disabled side of the carousel."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"currentItem"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"currentItemByPercent"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"items"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts"},"children":[{"type":"text","value":"initialized"}]}]}]},{"type":"element","tag":"h4","props":{"id":"slots"},"children":[{"type":"text","value":"Slots:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"track - div with carousel items"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicator - scroll indicator"}]}]},{"type":"element","tag":"code","props":{"code":"<!-- ... -->\n<slot name=\"track\" />\n\n<div>\n  <slot name=\"indicator\" />\n</div>\n<!-- ... -->\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<!-- ... -->\n<slot name=\"track\" />\n\n<div>\n  <slot name=\"indicator\" />\n</div>\n<!-- ... -->\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"lets-create-our-own-layout"},"children":[{"type":"text","value":"Let's create our own layout:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"example-custom-layout","props":{},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"custom-layout-code"},"children":[{"type":"text","value":"Custom layout code"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"CustomLayout.vue"}]},{"type":"element","tag":"code","props":{"code":"<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n  name: 'CustomLayout',\n  props: {\n    onMove: {\n      type: Function as PropType<(to: number) => void>,\n      required: true,\n    },\n    disabledSide: {\n      type: String as PropType<'left' | 'right' | 'none'>,\n      required: true,\n    },\n    currentItem: {\n      type: Number,\n      required: true,\n    },\n    items: {\n      type: Array as PropType<any[]>,\n      required: true,\n    },\n\n    /**\n     * layout specific props\n     */\n\n    title: {\n      type: String,\n      required: true,\n    },\n  },\n})\n</script>\n\n<template>\n  <div>\n    <div class=\"custom-layout-header\">\n      <div class=\"custom-layout-header__title\">\n        {{ title }}\n      </div>\n\n      <div class=\"custom-layout-header__indicator\">\n        <slot name=\"indicator\" />\n      </div>\n    </div>\n\n    <slot name=\"track\" />\n\n    <div class=\"custom-layout-arrows\">\n      <div @click=\"onMove(-1)\">\n        {{ '<' }}\n      </div>\n\n      <div @click=\"onMove(1)\">\n        {{ '>' }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.custom-layout-header {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n\n  &__title {\n    font-size: 1.5rem;\n    font-weight: 500;\n    line-height: 1.5;\n  }\n\n  &__indicator {\n    flex: 1;\n  }\n}\n\n.custom-layout-arrows {\n  display: flex;\n\n  div {\n    background: #6366f1;\n    margin: 5px;\n    padding: 10px;\n  }\n}\n</style>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n  name: 'CustomLayout',\n  props: {\n    onMove: {\n      type: Function as PropType<(to: number) => void>,\n      required: true,\n    },\n    disabledSide: {\n      type: String as PropType<'left' | 'right' | 'none'>,\n      required: true,\n    },\n    currentItem: {\n      type: Number,\n      required: true,\n    },\n    items: {\n      type: Array as PropType<any[]>,\n      required: true,\n    },\n\n    /**\n     * layout specific props\n     */\n\n    title: {\n      type: String,\n      required: true,\n    },\n  },\n})\n</script>\n\n<template>\n  <div>\n    <div class=\"custom-layout-header\">\n      <div class=\"custom-layout-header__title\">\n        {{ title }}\n      </div>\n\n      <div class=\"custom-layout-header__indicator\">\n        <slot name=\"indicator\" />\n      </div>\n    </div>\n\n    <slot name=\"track\" />\n\n    <div class=\"custom-layout-arrows\">\n      <div @click=\"onMove(-1)\">\n        {{ '<' }}\n      </div>\n\n      <div @click=\"onMove(1)\">\n        {{ '>' }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.custom-layout-header {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n\n  &__title {\n    font-size: 1.5rem;\n    font-weight: 500;\n    line-height: 1.5;\n  }\n\n  &__indicator {\n    flex: 1;\n  }\n}\n\n.custom-layout-arrows {\n  display: flex;\n\n  div {\n    background: #6366f1;\n    margin: 5px;\n    padding: 10px;\n  }\n}\n</style>\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"custom-layout-usage"},"children":[{"type":"text","value":"Custom layout usage:"}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <GSCarousel\n    :items=\"items\"\n    :items-to-show=\"2\"\n    :layout=\"CustomLayout\"\n    :layout-props=\"{\n      title: 'Hello Custom Layout',\n    }\"\n  >\n    <template #item=\"{ data }\">\n      <!-- ... -->\n    </template>\n  </GSCarousel>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  <GSCarousel\n    :items=\"items\"\n    :items-to-show=\"2\"\n    :layout=\"CustomLayout\"\n    :layout-props=\"{\n      title: 'Hello Custom Layout',\n    }\"\n  >\n    <template #item=\"{ data }\">\n      <!-- ... -->\n    </template>\n  </GSCarousel>\n</template>\n"}]}]}]}]},"navTitle":"Layouts","body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"carousel-layouts"},"children":[{"type":"text","value":"Carousel Layouts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To make carousel more flexible, I created layout system.\nYou need to pass "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"layout"}]},{"type":"text","value":" prop to define how the carousel should look like.\nAnd optionally you can pass "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"layout-props"}]},{"type":"text","value":" prop to pass some props to the specific layout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"example-layout-switch","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Put the layout component in the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"layout"}]},{"type":"text","value":" prop. You can also pass layout props there:"}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <GSCarousel\n    :layout=\"GSLayoutNumeric\"\n    :layout-props=\"{\n      disableArrows: true,\n    }\"\n  >\n  <!-- ... -->\n  </GSCarousel>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"GSCarousel"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"layout"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"GSLayoutNumeric"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"layout-props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"disableArrows"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    }"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  >"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  <!-- ... -->"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"GSCarousel"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"pre-defined-layouts"},"children":[{"type":"text","value":"Pre-defined layouts"}]},{"type":"element","tag":"h3","props":{"id":"examplelayoutdefault"},"children":[{"type":"text","value":"ExampleLayoutDefault"}]},{"type":"element","tag":"code","props":{"code":"import { GSCarousel, GSLayoutDefault } from 'gitart-scroll-carousel/bundled'\nimport 'gitart-scroll-carousel/dist/index.css'\nimport 'gitart-scroll-carousel/dist/GSArrow.css' \nimport 'gitart-scroll-carousel/dist/ExampleLayoutDefault.css'\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"GSCarousel"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"GSLayoutDefault"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitart-scroll-carousel/bundled'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitart-scroll-carousel/dist/index.css'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitart-scroll-carousel/dist/GSArrow.css'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitart-scroll-carousel/dist/ExampleLayoutDefault.css'"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GSArrow.css"}]},{"type":"text","value":" is unnecessary if "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"disableArrows"}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"true"}]}]}]},{"type":"element","tag":"h4","props":{"id":"appearrance"},"children":[{"type":"text","value":"Appearrance:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"example-layout-default","props":{},"children":[]}]},{"type":"element","tag":"h4","props":{"id":"props"},"children":[{"type":"text","value":"Props:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"disableArrows"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Boolean"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"false"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nDisabled arrows on both sides of the carousel."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"gslayoutnumeric"},"children":[{"type":"text","value":"GSLayoutNumeric"}]},{"type":"element","tag":"code","props":{"code":"import { GSCarousel, GSLayoutDefault } from 'gitart-scroll-carousel/bundled'\nimport 'gitart-scroll-carousel/dist/index.css'\nimport 'gitart-scroll-carousel/dist/GSArrow.css' \nimport 'gitart-scroll-carousel/dist/GSLayoutNumeric.css'\n","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"GSCarousel"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"GSLayoutDefault"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitart-scroll-carousel/bundled'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitart-scroll-carousel/dist/index.css'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitart-scroll-carousel/dist/GSArrow.css'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'gitart-scroll-carousel/dist/GSLayoutNumeric.css'"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GSArrow.css"}]},{"type":"text","value":" is unnecessary if "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"disableArrows"}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"true"}]}]}]},{"type":"element","tag":"h4","props":{"id":"appearrance-1"},"children":[{"type":"text","value":"Appearrance:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"example-layout-numeric","props":{},"children":[]}]},{"type":"element","tag":"h4","props":{"id":"props-1"},"children":[{"type":"text","value":"Props:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"disableArrows"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Boolean"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"false"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nDisable arrows on bootom of the carousel."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"disableCounter"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Boolean"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"false"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nDisables counter on bootom of the carousel."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"percentCounter"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Type:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Boolean"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Default:"}]},{"type":"text","value":" "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"false"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Details:"}]},{"type":"text","value":" "},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nShow counter number depends how much percent of the carousel is scrolled.\nHelpful when you have many slides."}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"custom-layout"},"children":[{"type":"text","value":"Custom layout"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"How pre-defined layouts are made you can see "},{"type":"element","tag":"a","props":{"href":"https://github.com/gitart-group/scroll-carousel/tree/main/src/components/layouts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"here"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Our layouts can accept few props and slots from the GSCarousel."}]},{"type":"element","tag":"h4","props":{"id":"props-2"},"children":[{"type":"text","value":"Props:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"onMove"}]}]},{"type":"text","value":" - method to move the carousel. pass 1 or -1 to move the carousel."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"disabledSide"}]}]},{"type":"text","value":" - "},{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'left'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'right'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'none'"}]}]},{"type":"text","value":" - disabled side of the carousel."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"currentItem"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"currentItemByPercent"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"items"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{"lang":"ts","class":"colored"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"initialized"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"slots"},"children":[{"type":"text","value":"Slots:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"track - div with carousel items"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicator - scroll indicator"}]}]},{"type":"element","tag":"code","props":{"code":"<!-- ... -->\n<slot name=\"track\" />\n\n<div>\n  <slot name=\"indicator\" />\n</div>\n<!-- ... -->\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#7F848E"}},"children":[{"type":"text","value":"<!-- ... -->"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"track\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFFFFF"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"indicator\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFFFFF"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#7F848E"}},"children":[{"type":"text","value":"<!-- ... -->"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"lets-create-our-own-layout"},"children":[{"type":"text","value":"Let's create our own layout:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"example-custom-layout","props":{},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"custom-layout-code"},"children":[{"type":"text","value":"Custom layout code"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"CustomLayout.vue"}]},{"type":"element","tag":"code","props":{"code":"<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n  name: 'CustomLayout',\n  props: {\n    onMove: {\n      type: Function as PropType<(to: number) => void>,\n      required: true,\n    },\n    disabledSide: {\n      type: String as PropType<'left' | 'right' | 'none'>,\n      required: true,\n    },\n    currentItem: {\n      type: Number,\n      required: true,\n    },\n    items: {\n      type: Array as PropType<any[]>,\n      required: true,\n    },\n\n    /**\n     * layout specific props\n     */\n\n    title: {\n      type: String,\n      required: true,\n    },\n  },\n})\n</script>\n\n<template>\n  <div>\n    <div class=\"custom-layout-header\">\n      <div class=\"custom-layout-header__title\">\n        {{ title }}\n      </div>\n\n      <div class=\"custom-layout-header__indicator\">\n        <slot name=\"indicator\" />\n      </div>\n    </div>\n\n    <slot name=\"track\" />\n\n    <div class=\"custom-layout-arrows\">\n      <div @click=\"onMove(-1)\">\n        {{ '<' }}\n      </div>\n\n      <div @click=\"onMove(1)\">\n        {{ '>' }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.custom-layout-header {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n\n  &__title {\n    font-size: 1.5rem;\n    font-weight: 500;\n    line-height: 1.5;\n  }\n\n  &__indicator {\n    flex: 1;\n  }\n}\n\n.custom-layout-arrows {\n  display: flex;\n\n  div {\n    background: #6366f1;\n    margin: 5px;\n    padding: 10px;\n  }\n}\n</style>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"PropType"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'vue'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"defineComponent"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'vue'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"defineComponent"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'CustomLayout'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"onMove"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"PropType"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"required"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"disabledSide"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"PropType"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'left'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" | "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'right'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" | "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'none'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"required"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"currentItem"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"required"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C678DD"}},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"PropType"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"any"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"[]>,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"required"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#7F848E"}},"children":[{"type":"text","value":"/**"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#7F848E"}},"children":[{"type":"text","value":"     * layout specific props"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#7F848E"}},"children":[{"type":"text","value":"     */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E5C07B"}},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"required"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"custom-layout-header\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"custom-layout-header__title\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"        {{ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" }}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"custom-layout-header__indicator\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"        <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"indicator\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"track\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"custom-layout-arrows\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" @"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"click"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"onMove"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#56B6C2"}},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"        {{ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'<'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" }}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" @"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"click"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#61AFEF"}},"children":[{"type":"text","value":"onMove"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"        {{ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'>'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" }}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"\"scss\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"scoped"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"custom-layout-header"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"display:"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"flex"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"align-items:"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"center"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"gap:"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" 20px;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  &"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"__title"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"font-size:"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" 1.5rem;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"font-weight:"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" 500;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"line-height:"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" 1.5;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  &"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"__indicator"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"flex:"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" 1;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"custom-layout-arrows"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"display:"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"flex"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"background:"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" #6366f1;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"margin:"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" 5px;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"padding:"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" 10px;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"custom-layout-usage"},"children":[{"type":"text","value":"Custom layout usage:"}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <GSCarousel\n    :items=\"items\"\n    :items-to-show=\"2\"\n    :layout=\"CustomLayout\"\n    :layout-props=\"{\n      title: 'Hello Custom Layout',\n    }\"\n  >\n    <template #item=\"{ data }\">\n      <!-- ... -->\n    </template>\n  </GSCarousel>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"GSCarousel"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"items-to-show"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"layout"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"CustomLayout"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"layout-props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":{"color":"#98C379"}},"children":[{"type":"text","value":"'Hello Custom Layout'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    }"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  >"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"item"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"{ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":" }"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"      <!-- ... -->"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#D19A66"}},"children":[{"type":"text","value":"GSCarousel"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E06C75"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#ABB2BF"}},"children":[{"type":"text","value":">"}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"pre-defined-layouts","depth":2,"text":"Pre-defined layouts","children":[{"id":"examplelayoutdefault","depth":3,"text":"ExampleLayoutDefault"},{"id":"gslayoutnumeric","depth":3,"text":"GSLayoutNumeric"}]},{"id":"custom-layout","depth":2,"text":"Custom layout","children":[{"id":"lets-create-our-own-layout","depth":3,"text":"Let's create our own layout:"},{"id":"custom-layout-code","depth":3,"text":"Custom layout code"},{"id":"custom-layout-usage","depth":3,"text":"Custom layout usage:"}]}]}},"_type":"markdown","_id":"content:3.layouts.md","_source":"content","_file":"3.layouts.md","_extension":"md"}]