Slick Carousel for CKEditor

Requirements

• CKEditor 4.
• A File Manager. In order to add images to the carousel, a File Browser that follows the CKEditor API must be included to select the images.
• Slick Carousel. You must add Slick to your site and adjust the stylesheets so you get the output that you want
• Add the Numeric Input plugin to your CKEditor.

Installation (1/2): Copy the files

Extract the contents of the zip in you plugins directory, so it ends up like this:

ckeditor\
        ...
        images\
        lang\
        plugins\
               ...
               slickcarousel\
                       plugin.js
                       dialog\
                       docs\
                       lang\
               ...
        skins\
        themes\

Installation (2/2): Add the plugin to CKEditor

Now add the plugin in your config.js or custom js configuration file, adding a line like the following one:

Finally, add to the config the paths of the scripts and stylesheets that you want to be included whenever a carousel is used in the contents:

config.slickcarousel = {
	stylesheets : [ '/slick/slick.css', '/slick/slick-theme.css', '/sample.css' ],
	scripts : [ 'https://code.jquery.com/jquery-1.12.3.min.js', '/slick/slick.min.js' ]
}

This way, you can use the carousel in any page without modifying the template by including these files only when needed, or you can put the files in the header of the template and use empty arrays for the files that must be added.

If desired, you can see other options to add the plugin to CKEditor.