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!