Creating a custom slider in Drupal 8

Question

I am currently involved in a Drupal 8 Project but I am very new to Drupal. The aim of the project, in short, is to build a website based on a existing design and the client can update the website in Drupal (like a modifying some article, upload images to gallery, adding slides to the a slider, etc.)

I already have a static html page with me.

At this moment, I set my target to move the slider of the static page to Drupal such that the user can add, remove or update a slide. Each slide will contain a background image, a title and a description text.

After a day of research I am now able to create my own theme and create a "hard-code" front page which is exactly the same with my static html page. I am struggle to convert the slides to generic items that the users can modify in Drupal.

I am reading some articles about Modules and Views, but feeling very lost.

Can I have some directions as to what aspect of topics or what techniques I should go through to achieve the target I mentioned? Thanks!

M-XYZ M-XYZ · Accepted Answer · 2017-04-01T22:48:26

I'm currently developing a Drupal 8 module that implements a block with a slider in it. It's really easy to edit the sliders. It uses Jssor slider.

What is your timeframe on getting this working? I am willing to help you.

Download Jssor slider (the non-jQuery / non-minimized / full-width version)
Code your own slider block, inside a new custom module. Put the Jssor HTML in the part of the slider block code, that outputs the HTML for the block
Create a Slider content type, via the Drupal control panel (the content type needs to consist of multiple images, and any other slide information you want to show) - this is where the end CMS user will add and remove images / text for the slider (they won't need to change the block).
The code for your slider block, should read the images chosen in the slider content type, and output the HTML for these within the Jssor HTML. Something like:
```
$slider_html = '';
foreach ($full_image_urls as $full_image_url)
{
  $slide_html .= '<div><img data-u="image" src="'. $full_image_url .'" /></div>';
}
```

The reason I implemented it in a block, is because blocks are easy to add to any page you like, and you can drag the order they display in.

This is a very high-level answer. If you need more detailed support, or you feel this is not clear, then I'm happy to help further. There isn't space to detail EVERY single step of implementation in an answer here, however you asked for a guide.

When my slider module is complete (it will be far easier to use than the existing jssor module that people struggle with), I'll be happy to give you an early copy.

Creating a custom slider in Drupal 8

1 Answers