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

Comments

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:
https://www.upload.ee/image/6245611/2016-10-13_17_05_12-Program_Manager.png

But in Drupal it just shows all the individual images as "li" elements:
https://www.upload.ee/image/6245618/2016-10-13_17_05_51-.png

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:

CSS & JS

In your YOURTHEME.libraries.yml use this:

global-styling:
  css:
    theme:
      css/style.css: {}
      css/slippry.css: {}
  js:
    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

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:
    js/slippry.min.js: {}
    js/custom.js: {}
  dependencies:
    - 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) {
      $("#slippry-demo").slippry({
        // transition: 'fade',
        // useCSS: true,
        // speed: 1000,
        // pause: 3000,
        // auto: true,
        // preload: 'visible',
        // autoHover: false
      });
    }
  };
}(jQuery));

You could also loads these assets for just a specific page or a block:
https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-an...

More about JavaScript API:

https://www.drupal.org/docs/8/api/javascript-api

Add new comment