{"id":17756944,"url":"https://github.com/graphieros/qroll","last_synced_at":"2025-04-01T11:44:42.835Z","repository":{"id":197403218,"uuid":"597443616","full_name":"graphieros/qroll","owner":"graphieros","description":null,"archived":false,"fork":false,"pushed_at":"2023-09-30T12:17:37.000Z","size":4251,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-24T02:35:20.332Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/graphieros.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-04T15:15:42.000Z","updated_at":"2024-01-27T14:55:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"efd44fe0-f93e-40db-8a87-7c0b7294b853","html_url":"https://github.com/graphieros/qroll","commit_stats":{"total_commits":91,"total_committers":2,"mean_commits":45.5,"dds":0.03296703296703296,"last_synced_commit":"a2fd49949059dcbc092dc24e351b6aefe0e341dd"},"previous_names":["graphieros/qroll"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fqroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fqroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fqroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/graphieros%2Fqroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/graphieros","download_url":"https://codeload.github.com/graphieros/qroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246635950,"owners_count":20809329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-26T16:10:48.616Z","updated_at":"2025-04-01T11:44:42.802Z","avatar_url":"https://github.com/graphieros.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Qroll\n\n\n```\nnpm i qroll\n```\n## DOCUMENTATION\n### Wrapper Parent\n\nThe library targets a parent DIV by its id.\n\nWrap all your content into a parent DIV with the id 'qroll-parent'  and class 'qroll-main'\nThe slides will correspond to the first level DIV children of the parent.\nThe example below will produce 3 slides:\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main\"\u003e\n    \u003cdiv\u003e\n        \u003ch1\u003eMy first slide\u003c/h1\u003e\n    \u003c/div\u003e\n\n    \u003cdiv\u003e\n        \u003ch2\u003eMy Second slide\u003c/h2\u003e\n    \u003c/div\u003e\n\n    \u003cdiv\u003e\n        \u003ch2\u003eMy Third slide\u003c/h2\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nAdd options to the Parent wrapper using css classes:\n- transition duration:\n    \u003e qroll-transition-[duration] with possible duration values 300, 400, 500, 600, 700, 800, 1000\n\n- show the vertical navigation:\n    \u003e qroll-nav\n\n- use infinite loop scrolling:\n    \u003e qroll-loop\n\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-transition-1000 qroll-loop\"\u003e\n    \u003cdiv\u003e\n        \u003ch1\u003eMy first slide\u003c/h1\u003e\n    \u003c/div\u003e\n\n    \u003cdiv\u003e\n        \u003ch2\u003eMy Second slide\u003c/h2\u003e\n    \u003c/div\u003e\n    \n    \u003cdiv\u003e\n        \u003ch2\u003eMy Third slide\u003c/h2\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Navigation\n\nThe navigation tooltips will try to find the first h1, h2, h3 or h4 element of each slide, to show their text content inside the tooltip. If there are no h1, h2, h3 or h4 element on a slide, the information provided in the tooltip will default to the page index.\n\nYou can also customize the content of your tooltips by adding a few data properties to your children divs. In the example below, the first tooltip will use the data-title property, the other tooltips will use the h2 element's content:\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-transition-1000 qroll-loop\"\u003e\n    \u003cdiv data-title=\"my custom name\"\u003e\n        \u003ch1\u003eMy first slide\u003c/h1\u003e\n    \u003c/div\u003e\n\n    \u003cdiv data-title=\"My slide 2\"\u003e\n        \u003ch2\u003eMy Second slide\u003c/h2\u003e\n    \u003c/div\u003e\n    \n    \u003cdiv data-title=\"My slide 3\"\u003e\n        \u003ch2\u003eMy Third slide\u003c/h2\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n```\n\nYou can also customize the css of each tooltip, using a data-tooltip-css property:\n\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-transition-1000 qroll-loop\"\u003e\n    \u003cdiv data-title=\"my custom name\" data-tooltip-css=\"background:blue;color:turquoise;font-weight:bold\"\u003e\n        \u003ch1\u003eMy first slide\u003c/h1\u003e\n    \u003c/div\u003e\n\n    \u003cdiv\u003e\n        \u003ch2\u003eMy Second slide\u003c/h2\u003e\n    \u003c/div\u003e\n    \n    \u003cdiv\u003e\n        \u003ch2\u003eMy Third slide\u003c/h2\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Meta tags management\nYou can set up meta tags (title and description) for all your main slides (not on horizontal slides), that will be applied on the HTML head when a slide gets into focus, so that each slide be treated as a separate page.\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-transition-1000 qroll-loop\"\u003e\n    \u003cdiv data-meta-title=\"Slide 1\" data-meta-description=\"This is a description for Slide 1\"\u003e\n        \u003ch1\u003eSlide 1\u003c/h1\u003e\n    \u003c/div\u003e\n    \u003cdiv data-meta-title=\"Slide 2\" data-meta-description=\"This is a description for Slide 2\"\u003e\n        \u003ch2\u003eSlide 2\u003c/h2\u003e\n    \u003c/div\u003e\n    \u003cdiv data-meta-title=\"Slide 3\" data-meta-description=\"This is a description for Slide 3\"\u003e\n        \u003ch2\u003eSlide 3\u003c/h2\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n```\n\n### Carousel\n\nChildren can become carousels by adding the following css classes:\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-transition-1000 qroll-loop\"\u003e\n    \u003cdiv class=\"qroll-carousel qroll-tooltip qroll-loop\" data-title=\"My carousel\"\u003e\n        \u003cdiv data-title=\"Carousel slide 1\" data-tooltip-css=\"font-weight:bold\"\u003e\n            \u003ch2\u003eCarousel slide 1\u003c/h2\u003e\n        \u003c/div\u003e\n        \u003cdiv data-title=\"Carousel slide 2\"\u003e\n            \u003ch2\u003eCarousel slide 2\u003c/h2\u003e\n        \u003c/div\u003e\n        \u003cdiv data-title=\"Carousel slide 3\"\u003e\n            \u003ch2\u003eCarousel slide 3\u003c/h2\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cdiv data-title=\"Regular slide\"\u003e\n        \u003ch2\u003eMy Second slide\u003c/h2\u003e\n    \u003c/div\u003e\n    \n    \u003cdiv data-title=\"Another regular slide\"\u003e\n        \u003ch2\u003eMy Third slide\u003c/h2\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### UI Components\n\n#### Inner carousels\n\nYou can include a carousel component into a slide, by adding the following css classes to a slide's child div:\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-transition-1000 qroll-loop\"\u003e\n    \u003cdiv data-title=\"My slide 1\"\u003e\n        \u003ch1\u003eMy inner carousel\u003c/h1\u003e\n\n        \u003cdiv class=\"qroll-carousel-component-horizontal\"\u003e\n            \u003cdiv style=\"height: 100px\"\u003e\n                \u003cp\u003eMy inner carousel paragraph 1\u003c/p\u003e\n            \u003c/div\u003e\n            \u003cdiv style=\"height: 100px\"\u003e\n                \u003cp\u003eMy inner carousel paragraph 2\u003c/p\u003e\n            \u003c/div\u003e\n            \u003cdiv style=\"height: 100px\"\u003e\n                \u003cp\u003eMy inner carousel paragraph 3\u003c/p\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e    \n    \u003c/div\u003e\n\n    \u003cdiv data-title=\"My slide 2\"\u003e\n        \u003ch2\u003eSlide 2\u003c/h2\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\nInner carousels have an auto sliding feature you can activate adding a few data-attributes to the inner carousel div.\n\nYou can control sliding direction (defaults to right on horizontal carousel, and down on vertical) and the timing (defaults to 5000ms).\nThe activation of the auto-sliding feature will display a pause / play button on the top left of the carousel, allowing users to stop and start the auto sliding.\n\nHorizontal carousel component:\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-transition-1000 qroll-loop\"\u003e\n    \u003cdiv data-title=\"My slide 1\"\u003e\n        \u003ch1\u003eMy inner carousel\u003c/h1\u003e\n\n        \u003cdiv class=\"qroll-carousel-component-horizontal\" data-auto-slide=\"true\" data-direction=\"right\" data-timer=\"5000\"\u003e\n            \u003cdiv style=\"height: 100px\"\u003e\n                \u003cp\u003eMy inner carousel paragraph 1\u003c/p\u003e\n            \u003c/div\u003e\n            \u003cdiv style=\"height: 100px\"\u003e\n                \u003cp\u003eMy inner carousel paragraph 2\u003c/p\u003e\n            \u003c/div\u003e\n            \u003cdiv style=\"height: 100px\"\u003e\n                \u003cp\u003eMy inner carousel paragraph 3\u003c/p\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e    \n    \u003c/div\u003e\n\n    \u003cdiv data-title=\"My slide 2\"\u003e\n        \u003ch2\u003eSlide 2\u003c/h2\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nVertical carousel component:\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-transition-1000 qroll-loop\"\u003e\n    \u003cdiv data-title=\"My slide 1\"\u003e\n        \u003ch1\u003eMy inner carousel\u003c/h1\u003e\n\n        \u003cdiv class=\"qroll-carousel-component-vertical\" data-auto-slide=\"true\" data-direction=\"down\" data-timer=\"5000\"\u003e\n            \u003cdiv style=\"height: 200px\"\u003e\n                \u003cp\u003eMy inner carousel paragraph 1\u003c/p\u003e\n            \u003c/div\u003e\n            \u003cdiv style=\"height: 200px\"\u003e\n                \u003cp\u003eMy inner carousel paragraph 2\u003c/p\u003e\n            \u003c/div\u003e\n            \u003cdiv style=\"height: 200px\"\u003e\n                \u003cp\u003eMy inner carousel paragraph 3\u003c/p\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e    \n    \u003c/div\u003e\n\n    \u003cdiv data-title=\"My slide 2\"\u003e\n        \u003ch2\u003eSlide 2\u003c/h2\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n#### Dialog\n\nQroll provides a ready-made wrapper for the native HTML dialog element, to help you set up easy modals.\nDialogs require the following:\n- to be placed at the same level as first children of the main parent\n- a \"qroll-dialog\" class\n- a unique data-id attribute\n\nYou can also provide a title, that wil be displayed in the header of the dialog, and specify if you wish to display a close cross button on the top right of the modal. Finally, you can provide a set of css classes into the data-css-classes attribute, and refer to these classes in your own css.\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-transition-1000 qroll-loop\"\u003e\n    \u003cdiv data-title=\"My slide 1\"\u003e\n        \u003ch1\u003eMy slides\u003c/h1\u003e\n    \u003c/div\u003e\n\n    \u003cdiv data-title=\"My slide 2\"\u003e\n        \u003ch2\u003eSlide 2\u003c/h2\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"qroll-dialog\" data-id=\"myDialog\" data-title=\"Hello Dialog!\" data-close-button=\"true\" data-css-classes=\"my-dialog-class my-dialog-class--warning\"\u003e\n        \u003cdiv\u003e\n            Warning, you are awesome !\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nDialogs can be open from anywhere in your application by calling the qroll.openDialog() interface, passing it the id as an argument. It can be used inline:\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-transition-1000 qroll-loop\"\u003e\n    \u003cdiv data-title=\"My slide 1\"\u003e\n        \u003ch1\u003eMy slides\u003c/h1\u003e\n    \u003c/div\u003e\n\n    \u003cdiv data-title=\"My slide 2\"\u003e\n        \u003ch2\u003eSlide 2\u003c/h2\u003e\n        \u003cbutton id=\"triggerButton\"\" onclick=\"qroll.openDialog('myDialog')\"\u003e\n            Am I awesome ?\n        \u003c/button\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"qroll-dialog\" data-id=\"myDialog\" data-title=\"Hello Dialog!\" data-close-button=\"true\" data-css-classes=\"my-dialog-class my-dialog-class--warning\"\u003e\n        \u003cdiv\u003e\n            Warning, you are awesome !\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n...or in your own javascript file:\n\n\n```\n\u003cscript\u003e\n\n    const triggerButton = document.getElementById(\"triggerButton\");\n    triggerButton.addEventListener(\"click\", () =\u003e {\n        qroll.openDialog(\"myDialog\")\n    });\n\n\u003c/script\u003e\n\n```\n\nReversely, a dialog can be closed from your application:\n\n```\n\u003cscript\u003e\n\n    const triggerButton = document.getElementById(\"triggerButton\");\n    triggerButton.addEventListener(\"click\", () =\u003e {\n        qroll.openDialog(\"myDialog\");\n        setTimeout(() =\u003e {\n            qroll.closeDialog(\"myDialog\");\n        }, 3000);\n    });\n\n\u003c/script\u003e\n\n```\n\nYou can add a carousel inner component into your dialog element (horizontal only):\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-transition-1000 qroll-loop\"\u003e\n    \u003cdiv data-title=\"My slide 1\"\u003e\n        \u003ch1\u003eMy slides\u003c/h1\u003e\n    \u003c/div\u003e\n\n    \u003cdiv data-title=\"My slide 2\"\u003e\n        \u003ch2\u003eSlide 2\u003c/h2\u003e\n        \u003cbutton id=\"triggerButton\"\" onclick=\"qroll.openDialog('myDialog')\"\u003e\n            Am I awesome ?\n        \u003c/button\u003e\n    \u003c/div\u003e\n\n    \u003cdiv class=\"qroll-dialog\" data-id=\"myDialog\" data-title=\"Hello Dialog!\" data-close-button=\"true\" data-css-classes=\"my-dialog-class my-dialog-class--warning\"\u003e\n        \u003cdiv data-carousel data-auto-slide=\"true\"\u003e\n            \u003cdiv\u003eAwesome 1\u003c/div\u003e\n            \u003cdiv\u003eAwesome 2\u003c/div\u003e\n            \u003cdiv\u003eAwesome 3\u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Charts\n\nQroll provides a set of minimalist charts to complement your slides on the go with cool graphs that are easy to set up.\nAdd the \"qroll-chart\" class to a div inside a slide, and use data attributes for all the options.\nYou can include your own set of colors. If not, great default colors will be applied.\n\nThe dataset passed into data-x-values and data-y-values uses JSON format.\n\n1. Line charts / Bar charts\nThey work exactly the same, just change the data-type to \"line\" or \"bar\", all the other required data-attributes are identical.\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-transition-1000 qroll-loop\"\u003e\n    \u003cdiv data-title=\"My slide 1\"\u003e\n        \u003ch1\u003eMy line chart\u003c/h1\u003e\n        \u003cdiv \n            class=\"qroll-chart\"\n            data-type=\"line\"\n            data-x-values='[\n                {\n                    \"name\" : \"Blue serie\",\n                    \"data\" : [-50,-32,-2,3,5,8,13,21,34,55,89,100]\n                },\n                {\n                    \"name\" : \"Red serie\",\n                    \"data\" : [1,1,2,3,5,8,13,21,34,55,89,90]\n                }\n            ]'\n            data-y-values='[\"JAN\",\"FEB\",\"MAR\",\"APR\",\"MAY\",\"JUN\",\"JUL\",\"AUG\",\"SEP\",\"OCT\",\"NOV\",\"DEC\"]'\n            data-legend=\"true\"\n            data-tooltip=\"true\"\n            data-line-size=\"8\"\n            data-plot-size=\"6\"\n            data-plot-value=\"true\"\n            data-plot=\"true\"\n            data-title=\"Title\"\n            data-subtitle=\"This is a subtitle\"\n            data-symbol=\"$\"\n            data-ticks=\"true\"\n            data-value-box=\"true\"\n            data-x-axis=\"true\"\n            data-y-axis=\"true\"\n            data-x-grid=\"true\"\n            data-y-grid=\"true\"\n            data-colors='[\"#3366CC\", \"#DC3912\"]'\n        \u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cdiv data-title=\"My slide 2\"\u003e\n        \u003ch2\u003eSlide 2\u003c/h2\u003e\n    \u003c/div\u003e\n    \u003cdiv data-title=\"My slide 3\"\u003e\n        \u003ch2\u003eSlide 3\u003c/h2\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n2. Donut chart\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-transition-1000 qroll-loop\"\u003e\n    \u003cdiv data-title=\"My slide 1\"\u003e\n        \u003ch1\u003eMy Donut chart\u003c/h1\u003e\n        div \n            style=\"max-width: 600px; margin:0 auto\"\n            class=\"qroll-chart\"\n            data-type=\"donut\"\n            data-title=\"title\"\n            data-subtitle=\"This is a subtitle\"\n            data-total=\"true\"\n            data-total-label=\"Total\"\n            data-tooltip=\"true\"\n            data-x-values='[\n                { \n                    \"name\" : \"Blue serie\",\n                    \"data\" : 10\n                },\n                { \n                    \"name\" : \"Red serie\",\n                    \"data\" : 20\n                },\n                { \n                    \"name\" : \"Orange serie\",\n                    \"data\" : 30\n                },\n                { \n                    \"name\" : \"Green serie\",\n                    \"data\" : 5\n                },\n                { \n                    \"name\" : \"Purple serie\",\n                    \"data\" : 3\n                },\n                { \n                    \"name\" : \"Indigo serie\",\n                    \"data\" : 10\n                }\n            ]'\n        \u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cdiv data-title=\"My slide 2\"\u003e\n        \u003ch2\u003eSlide 2\u003c/h2\u003e\n    \u003c/div\u003e\n    \u003cdiv data-title=\"My slide 3\"\u003e\n        \u003ch2\u003eSlide 3\u003c/h2\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n3. Thermometer Gauge\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-transition-1000 qroll-loop\"\u003e\n    \u003cdiv data-title=\"My slide 1\"\u003e\n        \u003ch1\u003eMy Gauge chart\u003c/h1\u003e\n        \u003cdiv\n            style=\"max-width: 300px; margin:0 auto\"\n            class=\"qroll-chart\"\n            data-type=\"gauge\"\n            data-min=\"0\"\n            data-max=\"100\"\n            data-gradient=\"false\"\n            data-symbol=\"%\"\n            data-value=\"80\"\n            data-title=\"Performance\"\n            data-bar-width=\"60\"\n            data-subtitle=\"Almost to target\"\n            style=\"width: 118px\"\n        \u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cdiv data-title=\"My slide 2\"\u003e\n        \u003ch2\u003eSlide 2\u003c/h2\u003e\n    \u003c/div\u003e\n    \u003cdiv data-title=\"My slide 3\"\u003e\n        \u003ch2\u003eSlide 3\u003c/h2\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nIf your data gets updated, you will need to refresh the charts.\nFor now the way to proceed is slightly barbaric, yet effective:\n\n```\n\u003cscript\u003e\n\n// refresh charts after data update\n\nfunction refreshCharts() {\n    const charts = document.getElementsByClassName(\"qroll-chart\");\n    Array.from(charts).forEach(chart =\u003e {\n        chart.innerHTML = \"\";\n    });\n    qroll.updateCharts();\n}\n\nrefreshCharts();\n\n\u003c/script\u003e\n\n```\n\n### Menu\n\nQroll provides a ready-made menu you can choose to add to your application.\nJust set up an empty div at first child of the main parent element, with the following attributes:\n\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-transition-1000 qroll-loop\"\u003e\n    \u003cdiv \n        class=\"qroll-menu\"\n        data-auto=\"true\"\n        data-css-classes=\"my-menu-class\"\n        data-title=\"My menu\"\n    \u003e\n    \u003c/div\u003e\n\n    \u003cdiv data-title=\"My slide 1\"\u003e\n        \u003ch1\u003eMy slide 1\u003c/h1\u003e\n    \u003c/div\u003e\n    \u003cdiv data-title=\"My slide 2\"\u003e\n        \u003ch2\u003eMy slide 2\u003c/h2\u003e\n    \u003c/div\u003e\n\n\u003c/div\u003e\n\n```\nThe data-auto attribute will create menu items based on your main slides, and link to them.\nYou can also provide additional links (or only use these), by adding the data-additional-links attribute, and provide an array of links.\nThis is also the place where you can link to a specific horizontal slide index (for example: slide 3 at horizontal index 2):\n\n```\n\u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-transition-1000 qroll-loop\"\u003e\n    \u003cdiv \n        class=\"qroll-menu\"\n        data-auto=\"true\"\n        data-css-classes=\"my-menu-class\"\n        data-title=\"My menu\"\n        data-additional-links='[\n            {\n                \"label\": \"My outside link\",\n                \"href\": \"https://myoutsidelink.com\",\n                \"target\": \"_blank\",\n                \"id\": \"myOutsideLink1\"\n            },\n            {\n                \"label\":\"My inner link\",\n                \"slideTo\":\"3,2\",\n                \"id\": \"innerLink1\"\n            }\n        ]'\n    \u003e\n    \u003c/div\u003e\n\n    \u003cdiv data-title=\"My slide 1\"\u003e\n        \u003ch1\u003eMy slide 1\u003c/h1\u003e\n    \u003c/div\u003e\n    \u003cdiv data-title=\"My slide 2\"\u003e\n        \u003ch2\u003eMy slide 2\u003c/h2\u003e\n    \u003c/div\u003e\n\n\u003c/div\u003e\n\n```\n\nAs for styling the menu, you can provide your own css classes through the data-css-classes attribute, or target the following classes:\n\n```\n\u003cstyle\u003e\n\n.qroll-main-menu-backdrop {}\n.qroll-main-menu-body {}\n.qroll-main-menu-item {}\n.qroll-main-menu-item--selected {}\n.qroll-main-menu-link {}\n.qroll-main-menu-title {}\n.qroll-main-menu-trigger-button {}\n\n\u003c/style\u003e\n\n```\n\n### Basic UI Elements\n\n#### Buttons, inputs, textareas \u0026 selects\nA range of ready made css classes allows you to style your buttons \u0026 basic form elements directly in your HTML.\n\n```\n\n\u003cbutton \n    class=\"\n        qroll-button\n        bg-transparent\n        outline-1-#FFF\n        text-#FFF\n        radius-6\n        h-1.2\n        my-1\n        px-1.5\n        py-0.5\n    \"\n\u003e\n    CLICK\n\u003c/button\u003e\n\n\u003c!-- Exact same styles can be applied on inputs, textareas, selects --\u003e\n\n\u003cinput \n    type=\"text\" \n    class=\"\n        qroll-input\n        radius-4\n        px-1\n        bg-#FFFFFF12\n        outline-1-#FFF\n        text-#FFF\n        my-1\n    \"\n\u003e\n\n```\n\nHere is a list of available classes for these items:\n\n| Class | Description | Examples |\n| ----- | ----------- | -------- |\n| bg  | Background: add any color type after the dash | bg-white, bg-#FFF |\n| text | Text color: add any color type after the dash | text-white, text-#FFF |\n| radius | add a number after the dash. Corresponds to px | radius-6 |\n| rounded | sets border radius to ideal rounded shape | rounded |\n| outline | provide a number and a color | outline-1-#FFF |\n| h | Height: provide a number, corresponds to em | h-1, h-0.5 |\n| ma | Margin all : provide a number, corresponds to em | ma-1, ma-0.2 |\n| mx, my, mt, mr, mb, ml | Specified margin, provide a number, corresponds to em | mx-1, my-0.2, mt-3, mr-2, mb-0.5, ml-2 |\n| pa | Padding all: provide a number, corresponds to em | pa-1, pa-0.5 |\n| px, py, pt, pr, pb, pl | Specified padding, provide a number, corresponds to em | px-1, py-0.2, pt-3, pe-2, pb-0.5, pl-2 |\n\n\n### Interface\n\nQroll exposes a few methods you can control:\n\n1. Slide up\n\n```\n\u003cscript\u003e\n    qroll.slideUp();\n\u003c/script\u003e\n\n```\n\n2. Slide down\n\n```\n\u003cscript\u003e\n    qroll.slideDown();\n\u003c/script\u003e\n\n```\n\n3. Slide to index\n\n```\n\u003cscript\u003e\n    // go to first slide\n    qroll.slideToIndex(0);\n\n    // go to second slide of horizontal carousel page\n    qroll.slideToIndex(1,1);\n\u003c/script\u003e\n\n```\n\n4. Refresh everything. If your content has changed as a result of SSR, you'll need to run the library again to apply the changes on the new content.\n\n```\n\u003cscript\u003e\n\n    qroll.refresh();\n\n\u003c/script\u003e\n\n```\n\n5. Get current slide index (number)\n\n```\n\u003cscript\u003e\n    qroll.getCurrentSlideIndex();\n\u003c/script\u003e\n```\n\n6. Get slides as an array with the following data type:\n\n```\n{\n    element: HTMLElement;\n    hasCarousel: boolean;\n    index: number;\n    title: string;\n}\n```\n\n```\n\u003cscript\u003e\n    qroll.getSlides();\n\u003c/script\u003e\n\n```\n\n# Integration in main frameworks\n\n## Vue\n\n### Vue 2 (single page application)\n\n- add qroll.js and style.css into the public folder\n- in public/index.html directly include the script tag referring to qroll.js:\n\n```\n\u003cscript defer src=\"qroll.js\"\u003e\u003c/script\u003e\n\n```\n\n- Place the main parent div inside App.vue:\n\n```\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-loop qroll-tooltip\"\u003e\n      \u003cdiv\u003e\n        \u003cMyComponent/\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cMyOtherComponent/\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cMyFinalComponent/\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e  \n  \u003c/div\u003e\n\u003c/template\u003e\n\n```\n... and you are good to go :)\n\n## Nuxt 3\n\nAdd qroll's style.css into the assets/css folder\nAdd qroll scripts into the public folder (both qroll.umd.cjs and qroll.umd.cjs.map) \n\n- nuxt.config.ts: if there is only one page in your application.\n\n```\nexport default defineNuxtConfig({\n    app: {\n        head: {\n            script: [\n                {\n                    src: /qroll.umd.cjs,\n                    body: true,\n                    defer: true,\n                    crossorigin: \"\"\n                }\n            ]\n        }\n    },\n    css: ['@assets/css/style.css']\n})\n\n```\n\n- Or directly in the head of your vue file, if your application contains several routes. Add the script to every head of every vue file using the library.\n\n- Place the main parent div inside your index.vue file. Don't forget to add data-delay (ms) and data-nuxt attributes.\ndata-delay will show a spinner while the script is running to put your slides into shape, whild data-nuxt=\"true\" will make sure the script runs after the HTML is displayed.\n\n- There are 2 types of loader icons you can use:\n1. \"spin\" (rotating arrows, default icon)\n2. \"dots\" (alterning animated dots), use data-loading-icon=\"dots\"\n\n```\n\n\u003cscript setup lang=\"ts\"\u003e\n// your code here\n// if you need to restart qroll after a page hydration, you can call window.qroll.restart(), but no need to do that on the first load.\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cdiv id=\"qroll-parent\" class=\"qroll-main qroll-loop qroll-tooltip\" data-delay=\"1000\" data-nuxt=\"true\" data-loader-icon=\"dots\"\u003e\n         \u003cdiv\u003e\n            \u003cMyComponent/\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n            \u003cMyOtherComponent/\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n            \u003cMyFinalComponent/\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n```\n\n## Other scripts tampering with class names\n- Some other libraries you may use could tamper with class names. You can be extra safe by adding the class \"qroll-slide\" to all direct children of the \"qroll-parent\" div.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Fqroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgraphieros%2Fqroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgraphieros%2Fqroll/lists"}