I trust that you found this blog post to be enjoyable. If you are interested in having my team handle your eCommerce setup and marketing for you, Contact Us Click here.

How to create a custom carousel / slick slider in Drupal

How to create a custom carousel / slick slider in Drupal

We are looking to create a slideshow when the users maintaining the site will be able to add and schedules slides with the form of Carousel / Slick. For this, I’ve created a custom media type (slider), based on images. I’ll demonstrate how to create a custom carousal / slick slider using hooks,plugins, custom code, view in Drupal.

Step 1: Install Drupal and set up the configuration into the Admin.

  • Log in to your Drupal admin.
  • Go to the admin panel -
    Structure -> Content type / Paragraph type ( which suits you best )
ptiwebtech_website
  • Click and add content type / paragraph type (which suits you best)
  • Then create their manage fields according to your slider requirement.

Step 2(a) : When we create a slider through content type.

  • Create content type.
  • Add their fields according to your slider requirement. 
ptiwebtech_website

 

Now manage fields.

ptiwebtech_website
OR

Step 2(b) : When we create a slider through Paragraph type.

  • Create paragraph type.
  • Add their fields according to your slider requirement.
ptiwebtech_website
  • Then add paragraph type into content type.


Note: Paragraphs is a new way of content creation. It allows the site builders to make things cleaner and can give more editing power to the end-users. “Drupal Paragraphs” is a very popular module in Drupal, used for handling content.

 

ptiwebtech_website


Step 3: Then create content.

--> add content which you have to show on the slider.

ptiwebtech_website

Step 4: Create view for the Slider.

Structure -> Views -> Add view.

  • Add view.
  • Then setup the view settings.
  • Then select the view type either it is page view or block view
    (its totally based on your requirement).
ptiwebtech_website
  • Then click “save and edit”.
  • Set the view title, format, fields, block setting, filter criteria, etc.
  • And last save the view.


Step 5: Go to the admin panel.

Structure -> Block layout

  • In Block layout we place the view into the particular region.
  • Place the view on that region which we created to show the slider.


Note: Blocks are individual pieces of your site's web page layout. They are placed inside the regions of your theme, and can be created, removed, and rearranged in the Block layout (admin/structure/block) administration page.

ptiwebtech_website


Step 6: Now we create a template for the paticular view.

  • After placing the view in block layout we create a template.
  • Go to the page where the slider show and inspect it into the particular portion of the slider.
  • Then the template suggestion appears for the slider.
  • Pick up one template suggestion and create template into the custom theme directory.

 

ptiwebtech_website
  • After seeing these suggestion one has to select a particular suggestion and create template into the theme directory.
  • For example: “views-view-unformatted MACHINE_NAME.html.twig” template into views folder in drupal custom theme directory.


Step 7: Now move towords the custom theme files and templates.

  • In the custom theme directory add the libraries into the “THEME_NAME.libraries.yml” file.
  • Write JS & CSS file and their CDNs into the libraries.yml file.
  • For an example :-
    ptiwebtech_website

Step 8: Create the template into views folder in the custom theme directory.

  • Write the HTML code for the slider in views template.
  • After write the HTML code its set into the dynamic slider.
    For Eaxmple :- HTML code.

 

Note: All view template is overridden with the variety of names, using the view, the display ID of the view or some combination thereof. For each view their will be a minimum of two templates used . The first is used for all the views: views-
view.html.twig.

ptiwebtech_website
  • After write the HTML code i.e, static code.
  • Now Its turns into dynamic code., so here i will show the dynamic code for the slider just for the example.
  • In this image for loop is used because more than one image or content will appear properly.
ptiwebtech_website
  • When we use views template quotation to render the content., we will write the machine name of that paticular manage field.
  • And the finally the slider will look like that.


You can check response after creating the custom carousel/slick slider in Drupal.

ptiwebtech_website
Back to blog