Roots Discourse

Including Flickity or other JS libraries

Hello,

I’m using Sage 10 and currently using Flickity for whenever I need a slider. My setup looks like this;

App.js

/**
 * External Dependencies
 */
import 'jquery';
import Alpine from 'alpinejs';
var Flickity = require('flickity-fade');

window.Alpine = Alpine
Alpine.start()

$(() => {
  // console.log('Hello world');

  // Slider
  var flkty = new Flickity();
});

package.json

  "dependencies": {
    "@tailwindcss/forms": "^0.3.4",
    "@tailwindcss/line-clamp": "^0.2.2",
    "alpinejs": "^3.5.0",
    "flickity": "^2.2.2",
    "flickity-fade": "^1.0.0"
  }

So when I want to use flickity I add the following HTML;

<div class="slider" data-flickity='{"wrapAround": false, "cellAlign": "left", "prevNextButtons": false, "pageDots": false, "fade": true, "autoPlay": true}'>
<div>slide</div>
<div>slide</div>
</div>

When I visit my website (localhost) I see a working slider, no problems. But when I want to add a navigation (asnavfor) to my slider it stops working; Flickity · Options

HTML;

<div class="" data-flickity='{"asNavFor": ".slider", "contain": true, "cellAlign": "center", "prevNextButtons": false, "pageDots": false}'>
<div>slide</div>
<div>slide</div>
</div>

It continues to work whenever I add the files manually to the page where I include the slider;

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="https://unpkg.com/flickity-fade@1/flickity-fade.js"></script>

Can anyone point me in the right direction why this happens? I already import the files in my app.js so this wouldn’t be necessary.

Thanks for the help!

1 Like

It doesn’t look like you’re importing flickity here. If you want to keep this consistent with the flickity docs, try this:

/**
 * External Dependencies
 */
import 'jquery';
import Alpine from 'alpinejs';
var Flickity = require('flickity');
require('flickity-fade');

I would probably write it like this:

import Flickity from 'flickity';
import 'flickity-fade';
2 Likes

Thanks for the reply, i tried both solutions and the slider will fade/work.
But the second slider I use for navigation won’t work anymore. Any idea :)?

EDIT: I didn’t realise that asfornav needed a separate package; yarn add flickity-as-nav-for --d
It works now. Thanks

2 Likes