Add adjustment option for the width of the slider container via CSS c…

…ustom property. (#29)

* Add adjustment option for the width of the slider container via CSS custom property.

* Changelog

* Adjust naming, add docs

README.md

@@ -218,10 +218,19 @@ To workaround it, it's required to anchor the width to an external element that
 
 ```js
 config.blocks.blocksConfig.slider = {
-  referenceContainerQuery: '.container .header',
+  referenceContainerQuery: 'body.has-sidebar .container .header',
 };
 ```
 
+This fix has an option to adjust this width given a fixed value of pixels via a CSS custom property called `--slider-block-edit-width-adjustment`.
+So you can add it in your custom theme, as follows:
+
+```css
+:root {
+  --slider-block-edit-adjustment: 40px;
+}
+```
+
 # Credits
 
 <img alt="Forschungszentrum Jülich" src="https://github.com/kitconcept/volto-slider-block/raw/master/fz-juelich.svg" width="200px" />

news/29.feature

@@ -0,0 +1 @@
+Add adjustment option for the width of the slider container via CSS custom property. @sneridagh

src/helpers/SlidesWidthFix/SlidesWidthFix.jsx

@@ -8,7 +8,7 @@ export const SlidesWidthFix = ({ width }) => {
       {`
 #page-add .block.slider .slick-slider,
 #page-edit .block.slider .slick-slider {
-width: ${width}px !important;
+width: calc(${width}px - var(slider-block-edit-width-adjustment, 0px)) !important;
 max-width: 1440px !important;
 }`}
     </style>