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:

var slideIndex = 0;
// Here you select all the HTML elements you want to use as slides
// querySelectorAll is a good choice 
//as it allows you to select elements using CSS selectors, I kinda love it!
var all = document.querySelectorAll(".view-page-hero .field-content li");

// Ok, let's start calling the function, so that it starts right away
carousel();

// This function simply adds a CSS class and removes it as the timeout ends, 
// be careful, it should be the same as the CSS animation you're going to build, 
// or else it won't allow to show the full animation.
function carousel() {
  var i;
  // Let's remove the class to each element first
  for (i = 0; i < all.length; i++) {
    all[i].classList.remove("animate");
  }
  // Then increment the slide idex (which element you want to animate)
  slideIndex++;
  // Of course you have to go to the first element if you reach the end.
  if (slideIndex > all.length) {slideIndex = 1}
  // Add the class to the current index element.
  all[slideIndex-1].classList.add("animate");
  setTimeout(carousel, 3000);
}

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).

@keyframes show {
    0% {opacity: 0;}
    20% {opacity: 1;}
    80% {opacity: 1;}
    100% {opacity: 0;}
}

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

.view-page-hero .field-content li {
    display: none;
}

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

.view-page-hero .field-content li.animate {
    animation: show 3s linear;
    display: inline-block;
}

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:

# Animates text in the page hero section
carousel:
  js:
    js/pagehero.js: {}

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:

/* Path is simple the first part is the same dang name of your theme, 
second part is the name defined in the yourtheme.libraries.yml file, 
in my case 'carousel' */
{{ attach_library('yourtheme/carousel') }}

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.