Slick Carousel Widget with DarkroomJS Image Editing
Slick Carousel Widget with DarkroomJS Image Editing
This module extends the carousel widget provided by web_widget_slick to include the DarkroomJS image editing features provided by web_widget_darkroom.
Usage
To create a Slick carousel widget with DarkroomJS support, follow the usage instructions in the web_widget_slick documentation, but replace "one2many_slick_images" with "slickroom" in the field definition, as shown here:
<field name="image_ids" widget="slickroom" options="{}"/>
To edit an image in a carousel, simply click the Edit button in the form view, then click on the image you wish to edit to open a DarkroomJS modal. Edit the image as desired according to the web_widget_darkroom documentation, and click Save to save the changes and update the carousel.
To create a Slick carousel widget with DarkroomJS support, follow the usage instructions in the web_widget_slick documentation, but replace "one2many_slick_images" with "slickroom" in the field definition, as shown here:
<field name="image_ids" widget="slickroom" options="{}"/>
To edit an image in a carousel, simply click the Edit button in the form view, then click on the image you wish to edit to open a DarkroomJS modal. Edit the image as desired according to the web_widget_darkroom documentation, and click Save to save the changes and update the carousel.
Example Module
An example implementation, for instructional purposes as well as convenient functional testing, is provided in the web_widget_slick_example module.
- Install web_widget_slick_example.
- Activate Developer Mode.
- Go to Settings / Technical / Slick, and open the record.
- The standard Slick carousel widget (from web_widget_slick) is displayed on top, followed by the slickroom widget with DarkroomJS support. Click the Edit button in the form view to try out the DarkroomJS features.
To try out different Slick settings:
- Go to Settings/User Interface/Views and search for 'slick.example.view.form'.
- Open the form view record.
- Click the Edit button.
- In the Architecture editor, find options="{'slidesToShow': 2}, and add any desired settings (separated by commas) inside the curly braces.
- Save the changes and browse to the widget, as described above, to see the widget with the new settings in effect.

An example implementation, for instructional purposes as well as convenient functional testing, is provided in the web_widget_slick_example module.
- Install web_widget_slick_example.
- Activate Developer Mode.
- Go to Settings / Technical / Slick, and open the record.
- The standard Slick carousel widget (from web_widget_slick) is displayed on top, followed by the slickroom widget with DarkroomJS support. Click the Edit button in the form view to try out the DarkroomJS features.
To try out different Slick settings:
- Go to Settings/User Interface/Views and search for 'slick.example.view.form'.
- Open the form view record.
- Click the Edit button.
- In the Architecture editor, find options="{'slidesToShow': 2}, and add any desired settings (separated by commas) inside the curly braces.
- Save the changes and browse to the widget, as described above, to see the widget with the new settings in effect.
Bug Tracker
Bugs are tracked on . In case of trouble, please check there if your issue has already been reported. If you spotted it first, help us smash it by providing detailed and welcomed feedback.
Bugs are tracked on . In case of trouble, please check there if your issue has already been reported. If you spotted it first, help us smash it by providing detailed and welcomed feedback.
Credits
Images
- Odoo Community Association: .
- Odoo Community Association: .
Contributors
- Brent Hughes <>
Do not contact contributors directly about support or help with technical issues.
- Brent Hughes <>
Do not contact contributors directly about support or help with technical issues.