{"id":13568130,"url":"https://github.com/kitconcept/volto-slider-block","last_synced_at":"2025-05-15T11:32:22.807Z","repository":{"id":37822395,"uuid":"470468809","full_name":"kitconcept/volto-slider-block","owner":"kitconcept","description":"Add Slider to a Plone (Volto) page.","archived":false,"fork":false,"pushed_at":"2025-04-30T08:59:14.000Z","size":42922,"stargazers_count":1,"open_issues_count":4,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-04T07:34:43.763Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/kitconcept.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2022-03-16T07:02:35.000Z","updated_at":"2025-04-30T08:57:10.000Z","dependencies_parsed_at":"2024-01-14T03:47:39.825Z","dependency_job_id":"98e3b8e8-1d22-49b7-b7b2-bfd47d29f06a","html_url":"https://github.com/kitconcept/volto-slider-block","commit_stats":{"total_commits":106,"total_committers":6,"mean_commits":"17.666666666666668","dds":0.2075471698113207,"last_synced_commit":"d250bec52e08e50465ef31147c850d93673294e3"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitconcept%2Fvolto-slider-block","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitconcept%2Fvolto-slider-block/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitconcept%2Fvolto-slider-block/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitconcept%2Fvolto-slider-block/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kitconcept","download_url":"https://codeload.github.com/kitconcept/volto-slider-block/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252305192,"owners_count":21726616,"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-08-01T14:00:20.395Z","updated_at":"2025-05-15T11:32:22.770Z","avatar_url":"https://github.com/kitconcept.png","language":"JavaScript","funding_links":[],"categories":["Add-ons"],"sub_categories":[],"readme":"# Volto Slider Block (@kitconcept/volto-slider-block)\n\nA slider block for volto\n\n[![npm](https://img.shields.io/npm/v/@kitconcept/volto-slider-block)](https://www.npmjs.com/package/@kitconcept/volto-slider-block)\n[![](https://img.shields.io/badge/-Storybook-ff4785?logo=Storybook\u0026logoColor=white\u0026style=flat-square)](https://kitconcept.github.io/volto-slider-block/)\n[![Code analysis checks](https://github.com/kitconcept/volto-slider-block/actions/workflows/code.yml/badge.svg)](https://github.com/kitconcept/volto-slider-block/actions/workflows/code.yml)\n[![Unit tests](https://github.com/kitconcept/volto-slider-block/actions/workflows/unit.yml/badge.svg)](https://github.com/kitconcept/volto-slider-block/actions/workflows/unit.yml)\n\n\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://kitconcept.com/kitconcept-white.svg\"\u003e\n  \u003cimg width=\"300\" alt=\"kitconcept, GmbH\" src=\"https://kitconcept.com/kitconcept-black.svg\"\u003e\n\u003c/picture\u003e\n\nThe Volto Slider Block allows editors to add sliders to a Volto page. You can see it in action under [www.dlr.de](https://www.dlr.de/de) and [www.fz-juelich.de](https://www.fz-juelich.de/de).\n\n\n## Screenshot\n\n\u003cimg width=\"1375\" alt=\"image\" src=\"https://user-images.githubusercontent.com/486927/170819511-11b0012b-c3ab-4578-b110-85d51e6103ac.png\"\u003e\n\n## Screencast\n\nhttps://user-images.githubusercontent.com/486927/170819371-6284d8e7-e5df-4893-9dab-cd06b1054505.mov\n\n\n## Volto Compatibility\n\nThese are the recommended versions:\n\n| Version | Volto version |\n| ------- | ------------- |\n| \u003e=5.0.0 | \u003e=17.0.0-alpha.27 |\n| \u003e=3.0.0 | \u003e=16.0.0-rc.2 |\n| \u003c=2.1.0 | \u003c=16.0.0-a50  |\n\n## Features\n\n\u003c!-- List your awesome features here --\u003e\n\n## Installation\n\nTo install your project, you must choose the method appropriate to your version of Volto.\n\n\n### Volto 17 and earlier\n\nCreate a new Volto project (you can skip this step if you already have one):\n\n```\nnpm install -g yo @plone/generator-volto\nyo @plone/volto my-volto-project --addon @kitconcept/volto-slider-block\ncd my-volto-project\n```\n\nAdd `@kitconcept/volto-slider-block` to your package.json:\n\n```JSON\n\"addons\": [\n    \"@kitconcept/volto-slider-block\"\n],\n\n\"dependencies\": {\n    \"@kitconcept/volto-slider-block\": \"*\"\n}\n```\n\nDownload and install the new add-on by running:\n\n```\nyarn install\n```\n\nStart volto with:\n\n```\nyarn start\n```\n\n### Volto 18 and later\n\nAdd `@kitconcept/volto-slider-block` to your `package.json`:\n\n```json\n\"dependencies\": {\n    \"@kitconcept/volto-slider-block\": \"*\"\n}\n```\n\nAdd `@kitconcept/volto-slider-block` to your `volto.config.js`:\n\n```javascript\nconst addons = ['@kitconcept/volto-slider-block'];\n```\n\nIf this package provides a Volto theme, and you want to activate it, then add the following to your `volto.config.js`:\n\n```javascript\nconst theme = '@kitconcept/volto-slider-block';\n```\n\n## Test installation\n\nVisit http://localhost:3000/ in a browser, login, and check the awesome new features.\n\n## Development\n\nThe development of this add-on is done in isolation using a new approach using pnpm workspaces and latest `mrs-developer` and other Volto core improvements.\nFor this reason, it only works with pnpm and Volto 18 (currently in alpha).\n\n\n### Pre-requisites\n\n-   [Node.js](https://6.docs.plone.org/install/create-project.html#node-js)\n-   [Make](https://6.docs.plone.org/install/create-project.html#make)\n-   [Docker](https://6.docs.plone.org/install/create-project.html#docker)\n\n## Configuration options\n\n### `enableAutoPlay`\n\nThis enables the autoplay controls in the block's settings.\n\n```js\nconfig.blocks.blocksConfig.slider.enableAutoPlay = true;\n```\n\n## Upgrade Guide\n\n### `volto-slider-block` 6.0.0\n\nThe underlying library used by this block has been changed.\nNow it uses [Embla Caroussel](https://www.embla-carousel.com).\nEmbla Caroussel has a similar API and has all the features that `react-slick` had.\nEmbla is more modern and supported, uses hooks to configure itself and it's extensible using plugins.\nIt solves all the problems that `react-slick` had, specially in the simplification of the containers and wrappers, and the way it handles the CSS transformations and the width of the elements.\n\nIf you've made any CSS customization, the classNames changed, so you'll need to update the CSS following this table.\n\n| Old className   | New className    |\n| --------------- | ---------------- |\n| slick-slider    | slider-wrapper   |\n| slick-list      | slider-viewport  |\n| slick-track     | slider-container |\n| slick-slide     | slider-slide     |\n| slick-arrow     | slider-button    |\n| slick-prev      | slider-button-prev |\n| slick-next      | slider-slide-next  |\n| slick-next      | slider-slide-next  |\n| slick-dots      | slider-dots      |\n| slick-dot       | slider-dot       |\n\n## Customization\n\nYou can use a Volto `schemaEnhancer` to modify the existing block schema. The block also can be extended using Volto's block variations.\n\n```\nimport { defineMessages } from 'react-intl';\nimport { pull } from 'lodash';\n\nimport SliderDefaultBody from './components/Blocks/Slider/DefaultBody'; // My custom view component for slides\n\nconst messages = defineMessages({\n  color: {\n    id: 'Color',\n    defaultMessage: 'Color',\n  },\n  slideBackgroundColor: {\n    id: 'Slide Background Color',\n    defaultMessage: 'Slide Background Color',\n  },\n  flagColor: {\n    id: 'Flag color',\n    defaultMessage: 'Flag color',\n  },\n});\n\nconst BG_COLORS = [\n  { name: 'transparent', label: 'Transparent' },\n  { name: 'grey', label: 'Grey' },\n];\n\n// The schemaEnhancer\nconst sliderBlockSchemaEnhancer = ({ formData, schema, intl }) =\u003e {\n  schema.properties.slides.schema.fieldsets[0].fields.push(\n    'slideBackgroundColor',\n  );\n  schema.properties.slides.schema.properties.slideBackgroundColor = {\n    widget: 'color_picker',\n    title: intl.formatMessage(messages.slideBackgroundColor),\n    colors: BG_COLORS,\n    default: 'transparent',\n  };\n  pull(schema.properties.slides.schema.fieldsets[0].fields, 'description'); // You can remove fields as well\n  return schema; // You should return the schema back\n};\nconst applyConfig = (config) =\u003e {\n\n  config.blocks.blocksConfig.slider = {\n    schemaEnhancer: sliderBlockSchemaEnhancer,\n    variations: [\n      {\n        id: 'default',\n        isDefault: true,\n        title: 'Default',\n        view: SliderDefaultBody,\n      },\n    ],\n  }\n}\n```\n\n## Extra Customization\n\nMore fields can be added to either the block itself or to each slide. You can use the configuration settings to do so:\n\n```\nconfig.blocks.blocksConfig.slider.extensions = {\n  blockSchema: {\n    fieldsets: [\n      {\n        id: 'default',\n        title: 'Default',\n        fields: ['new_field'],\n      },\n    ],\n    properties: {\n      new_field: {\n        title: 'New Slider Field',\n      },\n    },\n  },\n  slideSchema: {\n    fieldsets: [\n      {\n        id: 'default',\n        title: 'Default',\n        fields: ['new_field'],\n      },\n    ],\n    properties: {\n      new_field: {\n        title: 'New Slide Field',\n      },\n    },\n      },\n};\n```\nThe block and slide schemas will be merged with the existing ones.\n\n## Data adapter\n\nThe Teaser has a data adapter function that allows you to both tap into the changes in the settings and issue changes in other settings fields.\nThis is valuable in the Teaser block because it saves an internal cache of the target element.\nIf you select the target, these values are updated.\nWhen you update the target, by default these values remain, but you can issue another behavior.\n\nThe data adapter function is defined in the block's setting `dataAdapter`.\nYou can override it and add your own function, if required.\nThe following is the default adapter.\nYou should stick to this signature in your custom adapters.\n\n```js\nimport { difference } from '@plone/volto/helpers';\nimport { replaceItemOfArray } from '@plone/volto/helpers';\n\nexport const SliderBlockDataAdapter = ({\n  block,\n  data,\n  id,\n  onChangeBlock,\n  value,\n}) =\u003e {\n  let dataSaved = {\n    ...data,\n    [id]: value,\n  };\n\n  if (id === 'slides') {\n    const diff = difference(value, data[id]);\n    const index = diff.findIndex((val) =\u003e val);\n    if (diff[index]?.href?.[0]) {\n      dataSaved = {\n        ...dataSaved,\n        slides: replaceItemOfArray(value, index, {\n          ...value[index],\n          title: diff[index].href[0].Title,\n          description: diff[index].href[0].Description,\n          head_title: diff[index].href[0].head_title,\n        }),\n      };\n    }\n  }\n\n  onChangeBlock(block, dataSaved);\n};\n```\n\n### Make convenience commands\n\nRun `make help` to list the available commands.\n\n```text\nhelp                             Show this help\ninstall                          Installs the add-on in a development environment\nstart                            Starts Volto, allowing reloading of the add-on during development\nbuild                            Build a production bundle for distribution of the project with the add-on\ni18n                             Sync i18n\nci-i18n                          Check if i18n is not synced\nformat                           Format codebase\nlint                             Lint, or catch and remove problems, in code base\nrelease                          Release the add-on on npmjs.org\nrelease-dry-run                  Dry-run the release of the add-on on npmjs.org\ntest                             Run unit tests\nci-test                          Run unit tests in CI\nbackend-docker-start             Starts a Docker-based backend for development\nstorybook-start                  Start Storybook server on port 6006\nstorybook-build                  Build Storybook\nacceptance-frontend-dev-start    Start acceptance frontend in development mode\nacceptance-frontend-prod-start   Start acceptance frontend in production mode\nacceptance-backend-start         Start backend acceptance server\nci-acceptance-backend-start      Start backend acceptance server in headless mode for CI\nacceptance-test                  Start Cypress in interactive mode\nci-acceptance-test               Run cypress tests in headless mode for CI\n```\n\n### Development environment set up\n\nInstall package requirements.\n\n```shell\nmake install\n```\n\n### Start developing\n\nStart the backend.\n\n```shell\nmake backend-docker-start\n```\n\nIn a separate terminal session, start the frontend.\n\n```shell\nmake start\n```\n\n### Lint code\n\nRun ESlint, Prettier, and Stylelint in analyze mode.\n\n```shell\nmake lint\n```\n\n### Format code\n\nRun ESlint, Prettier, and Stylelint in fix mode.\n\n```shell\nmake format\n```\n\n### i18n\n\nExtract the i18n messages to locales.\n\n```shell\nmake i18n\n```\n\n### Unit tests\n\nRun unit tests.\n\n```shell\nmake test\n```\n\n### Run Cypress tests\n\nRun each of these steps in separate terminal sessions.\n\nIn the first session, start the frontend in development mode.\n\n```shell\nmake acceptance-frontend-dev-start\n```\n\nIn the second session, start the backend acceptance server.\n\n```shell\nmake acceptance-backend-start\n```\n\nIn the third session, start the Cypress interactive test runner.\n\n```shell\nmake acceptance-test\n```\n\n## License\n\nThe project is licensed under the MIT license.\n\n## Credits and Acknowledgements 🙏\n\nCrafted with care by **Generated using [Cookieplone (0.8.2)](https://github.com/plone/cookieplone) and [cookiecutter-plone (d9b5293)](https://github.com/plone/cookiecutter-plone/commit/d9b52933cbc6efd137e93e35a270214e307359f0) on 2025-01-15 17:14:53.439229**. A special thanks to all contributors and supporters!\n\n\u003cimg alt=\"Forschungszentrum Jülich\" src=\"https://github.com/kitconcept/volto-slider-block/raw/main/fz-juelich.svg\" width=\"200px\" /\u003e\n\n\u003cimg alt=\"Deutsches Zentrum für Luft- und Raumfahrt\" src=\"https://github.com/kitconcept/volto-slider-block/raw/main/dlr.svg\" width=\"230px\" /\u003e\n\nThe development of this plugin has been kindly sponsored by [Forschungszentrum Jülich](https://fz-juelich.de) and the [German Aerospace Center (DLR)](https://dlr.de).\n\n# License\n\nThe project is licensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitconcept%2Fvolto-slider-block","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkitconcept%2Fvolto-slider-block","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitconcept%2Fvolto-slider-block/lists"}