Creating views display style plugin might seem like complex task but it is not. Here are the steps to achieve this with example code.
Before going further, make sure you have basic introduction to Drupal 8 modules. You can check that here.
Create directory for our module, say my_scroller under /modules/custom. Create a file my_scroller.info.yml with below code:
Create a plugin class file as Scroller.php inside src/Plugin/views/style and add below code.
Let's go through above code.
These comments are important. The code won't work properly untill you add them.
Basic plugin definition.
Here we can define default values for options we want to provide for our style plugin.
Here we can provide options so our plugin can be customized. Creating options is much like regular config form. For more info, you can refer Form API Reference.
This is where theming information required for our plugin will go.
We are using separate file for preprocess function just to keep things organized.
Create a file called my_scroller.theme.inc in our module directory and include the following code
This code basically used to apply required logic and create variables which are passed on to the template for final rendering, along with the other options defined in the form that remain unchanged.
Now for the output of the style, create a file called views-view-scroller.html.twig inside a folder called templates. This name depends on the comments we added while defining our style in Scroller.php as below:
This means the template is to be found at the default location (/templates) with that name, only with dashes instead of underscores and .html.twig at the end.
Now only thing remaining is to use our variables and add required HTML in twig file.
That's it! You should now be able to write your own Views Display Plugin for Drupal 8. Happy coding!