jQuery slider randomly stopped working

I have a jQuery slider called Slippry (http://slippry.com/) and it stopped working over the weekend. It works in a separate html file but it doesnt in a block. Any ideas?

Drupal 8


Haven't used that before. "stopped working": so it worked in a block before? Was this related to the core update? There doesn't seem to a module for that library, just this sandbox project https://www.drupal.org/sandbox/10oclock/2482033.

Here's instructions on how to properly add assets to the site: https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-an...

Also this might be of interest: http://www.wdtutorials.com/drupal/views/views-slideshow-drupal-8-tutoria...

This is weird. I have several other jQuery stuffs on the site, but they are working fine.
I just inserted the html and js code to the custom block section as full html. I linked the CSS and jQuery files. The other jQuery elements I have done the same way and they work.

This is the code: http://pastebin.com/v0Rhr9XY

My CSS files for this are in htdocs/css folder and js file in htdocs/js folder.

In a separate HTML file it works:

But in Drupal it just shows all the individual images as "li" elements:

I am still on Drupal 8.1.10 as updating to 8.2 broke my system.

Figured out the problem. It didn't randomly stop working. I just didn't know you cant use 2 different callings for jQuery. Before both my jQuery elements worked because I hadnt flushed the caches yet. After flushing the caches a few days later the problem arose.

To fix this I deleted the jQuery callings from the html code and added just 1 calling to page.html.twig file.

Great! Here's a proper way to load assets (css, js) though:


In your YOURTHEME.libraries.yml use this:

      css/style.css: {}
      css/slippry.css: {}
    js/slippry.min.js: {}
    js/custom.js: {}

Css and js folders are in your theme folder. Global-styling will make the these css and js files available everywhere with your theme.


jQuery is already available but depending on your theme, you might need to define it as a dependency.

if you are using Bootstrap subtheme from the bootstrap basetheme, then you don't have to declare it, but for example for Bartik you have to add dependencies:

    js/slippry.min.js: {}
    js/custom.js: {}
    - core/drupal
    - core/jquery

To apply slippry to an element with id slippry-demo, you can do this in js/custom.js file:

(function ($) {
  Drupal.behaviors.myBehavior = {
    attach: function (context, settings) {
        // transition: 'fade',
        // useCSS: true,
        // speed: 1000,
        // pause: 3000,
        // auto: true,
        // preload: 'visible',
        // autoHover: false

You could also loads these assets for just a specific page or a block:

More about JavaScript API:


Add new comment