Home made text slider

So, instead of continuing the series of articles “Drupal 8 theming with bootstrap 3” I decided to switch to articles specific to an aspect of this journey through theme development.

This time we are going to see how I implemented in Drupal 8, I hope this will be useful to someone else too.

Simple text slider (alternate text with animations)

Ok, so I mentioned several ways of doing that in a previous article (here), and a first version of my text slider was without javascript, simpler to implement, but with limitations and a little bit more hassle to create the animation, not to mention the amount of redundand CSS I had to use.

So let’s go directly to the version 2 of this implementation.

Build a simple javascript

First step was to create a javascript file within my theme, it can be in the theme’s root folder, or, as I did, in a subfolder called ‘js’.

The javascript file, that I adapted from an example found here, is quite simple:

I added comments so that I think is easier to understand it.

Let’s move on…

The animation

When you want to animate you can do in several ways, one is to manually create one, in my case a very simple one, fade-in fade-out.. DONE!

What I used was using Keyframes.. yes, as when you animate in Blender, Godot, etc. You select some properties, just opacity in my case, but it can be quite a number of properties (even at the same time).

Then add the CSS that tells the browser what to do with it.

First tell it to hide all list elements when they are not animated

Then, when the .animate class is added, do the animation and make the element visible again:

Integrate with Drupal 8 theme

Drupal guides are quite… hum… not so bad, but dang, I wish there was a simpler version of ’em.
Anyhow, even if you may die of boredom, my advice is to take the risk and read the docs… or read my article

What you have to do is:

  1. Tell the theme that your libray exists and how to call it
  2. Modify the twig template in order to include the library only when needed

So the first thing is done by adding to the yourtheme.libraries.yml file (replace ‘yourtheme’ with the name of your theme) and do something like:

Boaz… super simple! But it doesn’t work, at least if you don’t do step 2.

Step 2 is to modify a theme template (the .twig files) in order to tell it to add the javascript library right there, like this:

Don’t forget to clear the cache, I think it’s needed.

That’s it! Well I hope… if you think I forgot something please let me know in the comments, I’ll try to check them regularly.

Oh, and here’s the pen (that of course does not include the Drupal integration part):

See the Pen Barebone text slider by Leonardo Araki (@Toshiwo) on CodePen.

Posted in Code Tricks, Theming, Web Development and tagged , , , .

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.