drewjbartlett / vue-flickity Goto Github PK
View Code? Open in Web Editor NEWA Vue Slider / Carousel Component for Flickity.js
Home Page: http://drewjbartlett.com/demos/vue-flickity/
A Vue Slider / Carousel Component for Flickity.js
Home Page: http://drewjbartlett.com/demos/vue-flickity/
My Flickity carousel in my Vue 3 Typescript app is being populated with slides dynamically at runtime via a for loop.
The problem:
Check out this video of the bug
The last slide added to my carousel is the only one that shows up, and when I try to drag the slide left or right my drag is ignored. Clicks to the slide navigation buttons or the page dots are registered and cause slide change callbacks to be triggered, but the slide itself never animates/moves/reacts at all to any of these clicks. For example: if my Flickity carousel contains slides that say "1" and "2", slide "2" (the last added slide) will always be visible and won't respond to navigation button/page dot clicks or dragging at all.
Where it gets really weird:
When I open up the inspector in chrome the Flickity carousel immediately starts displaying unique, scrollable slides. The same thing happens if I close the inspector after reaching this page containing the carousel; it "fixes" the bug.
What I've tried:
I thought that maybe the inspector opening or closing could be causing some sort of internal reload call for Flickity, so I tried to intentionally reload the carousel after I've added all of my slides, but it had no effect on the bug. Something unique is happening when I open/close the inspector in Chrome while the carousel is rendered that makes the last slide get "unstuck" from always being visible.
Code: Page.vue
<template>
<div class="card" v-show="showAccountPicker">
<h3 class="card-header text-center">Choose Bank Account</h3>
<div class="card-body text-center">
<div class="row">
<div class="col d-block m-auto">
<flickity ref="flickity" @init="onInit" :options="flickityOptions">
</flickity>
</div>
</div>
</div>
</div>
<script lang="ts">
import {defineComponent} from "vue";
import Flickity from "./widgets/Flickity.vue";
const axios = require("axios").default;
let bankAccounts = new Set<FundingSource>()
export default defineComponent({
name: "BankEntryPage",
components: {
SpringSpinner,
Flickity
},
data() {
return {
flickityOptions: {
initialIndex: 1,
prevNextButtons: true,
pageDots: true,
wrapAround: false,
}
};
},
methods: {
configureBankAccountCarousel(bankAccounts: Set<FundingSource>) {
let that = this
// eslint-disable-next-line @typescript-eslint/no-explicit-any
for (let account of bankAccounts) {
//last added cell is stuck focused by the carousel no matter what clicking/dragging occurs
(that.$refs.flickity as any).append(that.makeFlickityCell(account))
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(that.$refs.flickity as any).reloadCells() //Doesn't do anything to fix the bug
},
makeFlickityCell(bankAccount: FundingSource) {
const cell = document.createElement('div')
cell.className = 'carousel-cell'
cell.textContent = bankAccount.name + "\n" + bankAccount.bankAccountType
return cell
},
},
mounted() {
let script = document.createElement("script")
script.src = "https://cdn.dwolla.com/1/dwolla.js"
document.head.appendChild(script)
//Event listener for Flickity carousel
this.$nextTick(() => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(this.$refs.flickity as any).on('change', (index: number) => {
console.log('Slide changed to index ' + index)
})
})
},
created(){
this.configureBankAccountCarousel(bankAccounts)
}
});
</script>
Flickity.vue
<template>
<div ref="root" class="flickity">
<slot />
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
import Flickity from 'flickity'
export default defineComponent({
props: {
options: Object,
},
setup(props) {
let flickity: typeof Flickity | null = null
const root = ref<HTMLElement | null>(null)
onMounted(() => flickity = new Flickity(root.value as HTMLElement, props.options))
onUnmounted(() => flickity?.destroy())
return {
root,
append(element: HTMLElement) {
flickity?.append(element);
flickity?.select(-1)
},
on(eventName: string, listener: () => void) {
flickity?.on(eventName, listener)
},
reloadCells(){
flickity?.reloadCells()
}
}
},
})
</script>
<style>
@import '~flickity/dist/flickity.css';
.carousel-cell {
width: 100%;
height: 200px;
margin-right: 10px;
background: #383838;
border-radius: 5px;
counter-increment: gallery-cell;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
/*content: counter(gallery-cell);*/
line-height: 200px;
font-size: 80px;
color: white;
}
/* smaller, dark, rounded square */
.flickity-prev-next-button {
width: 30px;
height: 30px;
border-radius: 5px;
background: #333;
}
.flickity-prev-next-button:hover {
background: #248742;
}
/* arrow color */
.flickity-prev-next-button .arrow {
fill: white;
}
.flickity-prev-next-button.no-svg {
color: white;
}
/* position outside */
.flickity-prev-next-button.previous {
left: -5px;
}
.flickity-prev-next-button.next {
right: -5px;
}
/* white circles */
.flickity-page-dots .dot {
width: 12px;
height: 12px;
opacity: 1;
background: transparent;
border: 1px solid white;
}
/* fill-in selected dot */
.flickity-page-dots .dot.is-selected {
background: white;
}
/* Enable carousel to be keyboard focused & navigated */
/*.flickity-enabled:focus .flickity-viewport {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
}*/
</style>
flickity.d.ts
interface IFlickity {
new (el: string | HTMLElement, options?: Record<string, unknown>): this;
append(element: HTMLElement);
destroy();
select(id: string | number);
on(eventName: string, listener: () => void);
reloadCells();
}
declare module 'flickity' {
const Flickity: IFlickity;
export = Flickity;
}
Hello,
I tried the component, but if I try to add v-for the elments gona be outside the view port
<div class="carousel-cell col-xs-6 col-md-3" v-for="package in packages">
<button class="block-size unbuttonized" :class="{ 'active': package.active }">
<div class="pricing">
<div class="price">
<span class="symbol">{{ package.currency }} </span>
<span class="cost">{{ package.price }}</span>
<span class="period">{{ package.periodText }}</span>
</div>
<div class="price old">
<span class="cost">{{ package.currency }} {{ package.price_old }}</span>
<span class="period">{{ package.price.periodText }}</span>
</div>
</div>
<div class="details">
<span v-for="feature in package.features" v-html="feature.name"></span>
</div>
</button>
</div>
Rendering:
<div class="main-carousel flickity-enabled is-draggable" tabindex="0">
<div class="flickity-viewport" style="height: 0px;">
<div class="flickity-slider" style="left: 0px;"></div>
</div>
<button class="flickity-prev-next-button previous" type="button" disabled="" aria-label="previous"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow"></path></svg></button><button class="flickity-prev-next-button next" type="button" disabled="" aria-label="next"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow" transform="translate(100, 100) rotate(180) "></path></svg></button><ol class="flickity-page-dots"></ol><div class="carousel-cell col-xs-6 col-md-3"><button class="block-size unbuttonized"><div class="pricing"><div class="price"><span class="symbol">€ </span> <span class="cost">3.90</span> <span class="period">/mo</span></div> <div class="price old"><span class="cost">€ 7.90</span> <span class="period"></span></div></div> <div class="details"><span>Dominio <strong>Incluso</strong></span><span>Spazio Web da <strong>10GB</strong></span><span>Traffico mensile <strong>Illimitato</strong></span><span>Database MySQL <strong>Illimitati</strong></span></div></button></div><div class="carousel-cell col-xs-6 col-md-3"><button class="block-size unbuttonized"><div class="pricing"><div class="price"><span class="symbol">€ </span> <span class="cost">7.90</span> <span class="period">/mo</span></div> <div class="price old"><span class="cost">€ 12.90</span> <span class="period"></span></div></div> <div class="details"><span>Dominio <strong>Incluso</strong></span><span>Spazio Web da <strong>20GB</strong></span><span>Domini aggiuntivi <strong>Illimitati</strong></span><span>Traffico mensile <strong>Illimitato</strong></span><span>Database MySQL <strong>Illimitati</strong></span></div></button></div><div class="carousel-cell col-xs-6 col-md-3"><button class="block-size unbuttonized"><div class="pricing"><div class="price"><span class="symbol">€ </span> <span class="cost">11.90</span> <span class="period">/mo</span></div> <div class="price old"><span class="cost">€ 23.90</span> <span class="period"></span></div></div> <div class="details"><span>Dominio <strong>Incluso</strong></span><span>Spazio Web da <strong>30GB</strong></span><span>Domini aggiuntivi <strong>Illimitati</strong></span><span>Traffico mensile <strong>Illimitato</strong></span><span>Database MySQL <strong>Illimitati</strong></span></div></button></div>
</div>
CodePen: https://codepen.io/fli-seiji/pen/abvbPgj
I'm trying to dynamically add cells and can not find why it's rendering in reverse. When rearranging the model array list it renders as expected.
Could you tell me how to use events API of Flickity?
this.$refs.slider.on('select', function () {
console.log(vm.$refs.slider.flickity.selectedIndex);
});
This code doesnt work.
I get the error "Cannot read property 'on' of undefined"
Hello guys!
Can someone provide an example of using asNavFor option?
Thanks!
I have a blog style setup, with a flickity slider for each article.
I then have a side bar with a list of articles, and on click i transition the articles.
During this transition the flickity object seems to lose its styling, and all images breifly stack relative.
Any idea how to prevent this?
When using Flickity options, pageDots: true. I do see the underlined flickity instance do created pageDots elements. But nothing is visible on the screen.
I'm using nuxt.
It's working in dev mode but not working in production mode.
(flickity option is ssr false)
Thanks a lot for making this.
Any plans to support the flickity-fullscreen option?
https://github.com/metafizzy/flickity-fullscreen#install
or any pointers how to go about adding it? Cheers!
I was wondering if someone faced the same issue that I've found vue-flickity.
I have 2 Flickity instances on my page: one for the hero-images (set to autoPlay) and another one for captions with asNavFor the hero-images! I added a custom ui dots as well.
If you watch the videos below, you will see the second caption slide don’t show up at the first time the carousel start. I inspected the code while the carousel was running and found that at the first cycle the class is-selected is-nav-selected are not add in the DOM on the second captions.
If i don’t use a custom dot ui, I don’t face this bug.
<template>
<section id="header-carousel" class="row no-gutters comp-lineup-carousel">
<div class="col">
<div style="position:relative;">
<div class="flickity-nav">
<div class="container extra-padding h-100">
<div class="row align-items-center h-100">
<div class="col">
<button @click="flickityCarousel.pausePlayer();flickityCarousel.previous();" type="button" class="flickity-previous">Précédent</button>
<button @click="flickityCarousel.pausePlayer();flickityCarousel.next();" type="button" class="flickity-next">Suivant</button>
</div>
</div>
</div>
</div>
<flickity class="flickity-wrapper is-hidden"
:class="'flickity-carousel-' + uid"
:ref="'flickityCarousel_' + uid"
:options="flktyCarousel">
<tile v-for="dataLineUp in dataLineUps"
:key="dataLineUp.id"
:link="dataLineUp.link"
:srcImage="dataLineUp.srcImage"
:altImage="dataLineUp.altImage">
</tile>
</flickity>
<div class="flickity-lines d-flex justify-content-center">
<div class="container extra-padding">
<div class="row no-gutters">
<div class="col" role="toolbar">
<ul class="flickity-dots d-flex justify-content-center">
<li v-for="(dataLineUp, index) in dataLineUps"
:class="{ 'flickity-active': selectedCarouselSlide === index }">
<button @click="flickityCarousel.pausePlayer();flickityCarousel.select(index);" type="button">{{index+1}}</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="flickity-captions container extra-padding py-4"
@mouseenter="mouseEnterCaptions"
@mouseleave="mouseLeaveCaptions">
<flickity class="flickity-wrapper"
:ref="'flickityCarouselNav_' + uid"
:options="flktyCaptions">
<div class="carousel-cell">
<div class="row align-items-center w-100 no-gutters">
<div class="col-12 col-md-9">
<div class="caption-header pb-1">Vézina, chef responsable - saison 2 Vézina, chef responsable - saison 2</div>
<div class="caption-subheader">Jeudi 18 h<span class="pipe-divider">Manger selon les saisons</span></div>
</div>
<div class="col-12 col-md-3 d-flex justify-content-center justify-content-md-end">
<div class="btn btn-outline-primary mt-3 mt-md-0 text-uppercase" href="#" role="button">Voir l'épisode</div>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="row align-items-center w-100 no-gutters">
<div class="col-12 col-md-9">
<div class="caption-header pb-1">Mon food truck à la clé</div>
<div class="caption-subheader">Lundi 15 mai 19 h<span class="pipe-divider">Rhône-alpes-jour 1</span></div>
</div>
<div class="col-12 col-md-3 d-flex justify-content-center justify-content-md-end">
<div class="btn btn-outline-primary mt-3 mt-md-0 text-uppercase" href="#" role="button">Voir l'épisode</div>
</div>
</div>
</div>
<div class="carousel-cell">
<div class="row align-items-center w-100 no-gutters">
<div class="col-12 col-md-9">
<div class="caption-header pb-1">Le nouveau magazine est arrivé en kiosque!</div>
<div class="caption-subheader">Le BBQ est au menu<span class="pipe-divider">Déjeuner sur le BBQ</span></div>
</div>
<div class="col-12 col-md-3 d-flex justify-content-center justify-content-md-end">
<a class="btn btn-outline-primary mt-3 mt-md-0 text-uppercase" href="#" role="button">Abonnez-vous</a>
</div>
</div>
</div>
</flickity>
</div>
</div>
</section>
</template>
<script>
import Flickity from '../Flickity.vue'
import Tile from './Tile.vue'
//console.log('!!!!!!!!!!!!!', Tile)
export default {
name: 'lineup-carousel',
components: {
Flickity,
Tile
},
data () {
return {
uid: this._uid,
dataLineUps: [
{
link: 'http://fromagedici.com',
srcImage: '/public/images/static/slide1-desktop.jpg',
altImage: ''
},
{
link: 'http://fromagedici.com',
srcImage: '/public/images/static/slide2-desktop.jpg',
altImage: 'fake to remove please 2 '
},
{
link: 'http://fromagedici.com',
srcImage: '/public/images/static/slide3-desktop.jpg',
altImage: 'fake to remove please 3'
}
],
selectedCarouselSlide: 0,
flktyCaptions: {
asNavFor: '.flickity-carousel-'+ this._uid,
prevNextButtons: false,
pageDots: false,
cellAlign: 'left',
draggable: false,
imagesLoaded: true
},
flktyCarousel: {
autoPlay: true,
wrapAround: true,
prevNextButtons: false,
pageDots: false,
imagesLoaded: true,
arrowShape: {
x0: 10,
x1: 60, y1: 50,
x2: 65, y2: 50,
x3: 15
}
}
};
},
computed: {
flickityCarousel() {
return this.$refs['flickityCarousel_' + this.uid];
}
},
methods: {
mouseEnterCaptions: function() {
this.$refs['flickityCarousel_'+ this.uid].pausePlayer()
},
mouseLeaveCaptions: function() {
this.$refs['flickityCarousel_'+ this.uid].unpausePlayer()
},
},
beforeMount () {
},
mounted () {
const allFlickity = document.querySelectorAll('.flickity-wrapper')
for (let i = 0; i < allFlickity.length; ++i) {
allFlickity[i].classList.remove('is-hidden')
}
this.$nextTick(() => {
this.flickityCarousel.on('select', () => {
this.selectedCarouselSlide = this.$refs['flickityCarousel_'+ this.uid].selectedIndex();
});
});
},
updated () {
// console.log('*********************************')
},
beforeMount () {
// Use this method for client-side fetching
}
};
</script>
<style scoped lang="scss">
</style>
I was running into this error after npm install flickity vue-flickity -save
:
Failed to load src: "flickity/dist/flickity.css" from file: "/Users/jschofie/Dropbox/Work Projects/kohler-corporate/node_modules/vue-flickity/src/flickity.vue"
(node:14152) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'trim' of undefined while parsing file: /Users/jschofie/Dropbox/Work Projects/kohler-corporate/node_modules/vue-flickity/src/flickity.vue
at /Users/jschofie/Dropbox/Work Projects/kohler-corporate/node_modules/vueify/lib/compiler.js:266:17
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
(node:14152) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:14152) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Going into Flickity.vue and chaning the src attribute on the style tag to
<style src="../../flickity/css/flickity.css"></style>
seemed to address the issue.
Is there a way to, or suggestion, on how I'd go about re-initing several (dynamic) flickity carousels used in a SPC?
I'm having no luck with this.$refs.flickity.rerender()
, probably because there are multiple carousels using this ref
.
Any ideas?
The vertical scroll of the browser reacts during the horizontal swipe, so it is a bit hard to use
Is it possible to not let the browser scroll vertically while swiping horizontally?
To prevent the slideshow from collapsing when the parent component is destroyed
Parent.vue
<flickity @flickity:beforeDestroy="handleFlickityDestroy" ref="flickity" ... />
<script>
export default {
methods: {
handleFlickityDestroy() {
this.$refs.flickity.destroy()
}
}
}
</script>
Flickity.vue
beforeDestroy() {
// provide event API for parent component to control
// destroying this component on beforeDestroy
this.$emit('flickity:beforeDestroy', this.$flickity);
if (this.options.destroyAutomatically) {
this.$flickity.destroy();
}
this.$flickity = null;
},
When I try to use this component with Vue SSR, I get the following error in the console:
ReferenceError: window is not defined
at Object.module.exports.__WEBPACK_AMD_DEFINE_FACTORY__ (node_modules/flickity/js/index.js:39:1)
Great package!
To get bgLazyLoad: true
to work, I need to install https://github.com/metafizzy/flickity-bg-lazyload . I tried installing it via npm install flickity-bg-lazyload --save
, but my data-flickity-bg-lazyload
attributes just get ignored.
Have you tried using add-on packages like this? Any ideas how to get them to work?
Thanks!
Flickity's imagesLoaded option allows automatic re-rendering of the slideshow once images have fully loaded, but requires the explicit inclusion of flickity-imagesloaded
, which is not currently part of this package.
As things are now, you can approximate this behavior by manually importing imagesloaded
and binding it to flickity's ready event through flickityOptions like so:
<template>
<Flickity :options='flickityOptions' ref='flickity'>
<div v-for='image, i in images' :key='image._id'/>
<img :src='image.url'/>
</div>
</Flickity>
</template>
<script>
import imagesLoaded from 'imagesloaded';
export default {
name: 'Slideshow',
props: {
images: Array
},
methods: {
loadComplete () {
if (this.$refs.flickity) {
this.$refs.flickity.reloadCells();
}
}
},
data() {
return {
flickityOptions: {
prevNextButtons: false,
pageDots: false,
on: {
ready: () => { imagesLoaded(this.$refs.flickity, this.loadComplete) }
}
}
}
}
}
</script>
But it would much nicer to be able just do this and clean up the ref:
<template>
<Flickity :options='flickityOptions'>
<div v-for='image, i in images' :key='image._id'/>
<img :src='image.url'/>
</div>
</Flickity>
</template>
<script>
export default {
name: 'Slideshow',
props: {
images: Array
},
data() {
return {
flickityOptions: {
prevNextButtons: false,
pageDots: false,
imagesLoaded: true
}
}
},
}
</script>
Hello. Great slider, but unfortunately I have issues with Nuxt. With no SSR setup all is working perfectly.
With Nuxt component breaks if I refresh the page. If I navigate to this page from other pages, then it works. So it breaks only on server.
[vue-router] Failed to resolve async component default: SyntaxError: Unexpected token <
[vue-router] uncaught error during route navigation:
/home/***/Documents/WORK/EXAMPLES/nuxt-examples/node_modules/vue-flickity/flickity.vue:1
(function (exports, require, module, __filename, __dirname) { <template>
^
SyntaxError: Unexpected token <
How can i instance multiple vue flickity in the same page? Try with unique ref but didn't work
Hello,
What is vue-flickity license?
The original flickity library uses GPLv3. Does this effect vue-flickity and projects using it?
I've been working with Flickity in my Vue 3 app and it works fine when I use a hardcoded HTML carousel with static cells. I need to add cells programmatically at runtime, however, and I can't get the flickity API to work correctly.
I'm trying to follow the append() example but I get the error flickity.js?1385:72 Bad element for Flickity: .carousel
in my inspector during runtime. I tried to follow the solution here and here but neither have been able to run successfully, it looks like its due to Typescript errors on the Flickity lib. I also installed @types/flickity, fyi.
What can I do to fix my append logic below?
<template>
<div class="row">
<div class="col d-block m-auto payment-option">
<flickity ref="carousel" :options="flickityOptions">
</flickity>
</div>
</div>
</template>
<script lang="ts">
import {defineComponent} from "vue";
//import Flickity from 'vue-flickity/src/flickity.vue';
import Flickity from 'flickity'
export default defineComponent({
name: "PageName",
components: {
Flickity
},
data() {
return {
flickityOptions: {
initialIndex: 3,
prevNextButtons: false,
pageDots: true,
wrapAround: true
}
};
},
methods: {
createBankAccountCarousel(flkty: Flickity) {
flkty.append(this.makeFlickityCell())
},
makeFlickityCell() {
const cell = document.createElement('div');
cell.className = 'carousel-cell'
cell.textContent = "Hi"
return cell
}
},
mounted() {
let flkty = new Flickity(this.$refs.carousel)
this.createBankAccountCarousel(flkty)
}
});
</script>
If you're using props array to populate slider and props array changes -/+, I can watch the items and trigger a reinit? Best method for this?
Flickity provides events to listen to: http://flickity.metafizzy.co/events.html
It seems this is not possible with vue-flickity, as there is no method for that in the wrapper:
this.$refs.flickity.on('select', this.doSomething)
does not work, as the "on" method is unknown. Could you simply add this and pass it to flickity as all the other methods?
Or is there another, better way to do this?
This is not a bug, but a solution after 2 days trying to fix this thing.
Using this component and axios, I retrieve data, use v-for
and refresh vue-flickity but I had problems rebuilding the carousel. Also, getting that data and using created ()
exploded in Firefox and coudn`t create the carousel.
Solution:
axios(
{
method: .....m
url: ....,
data: ....
})
.then(response => {
if (response && response.status === 200) {
this.myData = response.data // this will be used in v-for inside flickity
} else {
// raven....
}
})
.then(response => {
this.$nextTick(function () { // the magic
this.$refs.flickity.rerender()
})
})
.catch((error) => {
// raven
})
<flickity ref="flickity" :options="myOptions">
<div class="carousel-cell" v-for="item in myData" :key="item.id">
<span class="name">{{ item.names }} {{ item.father_surname }}</span>
</div>
</flickity>
Hi all,
thanks for you work, it works very well.
I want to create a gallery like facebook.
Slider with images that can be scrolled. If i click on the image, i want to open the image in a fullscreen div container with the comments from it. But there are two problems at the moment:
Hope you guys can help.
Thanks!
I have troubles make flickity work when using as a npm package . It is likely related to the build process with laravel-mix, webpack and bubel transpiler.
Touch Swiping stops working on mobile chrome (and chrome dev simulator), but only with the mentioned build process.
I asked about it here: metafizzy/flickity#540
Does anyone experience similar issues with a similiar build process?
right portion of previous portion is visible in present card, right portion of present is move to next cards
Working on a project that required these flickity methods:
dragEndRestingSelect()
updateSelectedSlide()
settle(x)
Had to add to your source plugin.... you may want to update it.
Hoping someone can help with this issue.
methods: {
resize() {
this.$refs.flickity.resize()
}
},
beforeMount() {
this.resize()
}
This is not working. I'm getting:
[Vue warn]: Error in beforeMount hook: "TypeError: Cannot read property 'resize' of undefined"
if I use mounted() I don't get an error but the slides aren't resized.
If I put it in a button, resize works on click:
<button @click="resize()">Resize That
I am trying to use flickitys lazyload option, but it somehow does not have any effect.
here are my options:
data: () => {
return {
flickityOptions: {
prevNextButtons: false,
pageDots: true,
wrapAround: true,
lazyLoad: 1,
resize: true,
cellAlign: 'left',
setGallerySize: false
// autoPlay: 5000
},
currentSlide: 1
}
},
and my flickity slider:
<VueFlickity v-if="hasSlides" ref="flickity" :options="flickityOptions">
<div v-for="(slide, index) in slides" :key="index" class="HeroSlider__gallery-cell">
<img
v-if="slide.image"
:data-flickity-lazyload-src="slide.image.sizes.large"
:data-flickity-lazyload-srcset="`${slide.image.sizes.huge} 2000w,
${slide.image.sizes.large} 1440w,
${slide.image.sizes.medium} 1280w,
${slide.image.sizes.small} 720w`"
:data-sizes="'100vw'"
:alt="slide.image.alt || slide.image.filename"
class="HeroSlider__image"
>
</div>
</VueFlickity>
Do I miss something?
I also have to mention that I currently have 4 slides, so with lazyLoad: 1
, I would expect that at least my last image is lazyloaded in a carousel... Actually even more!
Anyway all my images are loaded when loading the page.
Thanks for some hints on that.
Cheers
I have a slider with a router link inside each slide, and i can't swipe or drag slides on desktop without redirecting to another route. I guess it's because router links click can't be prevented.
Slide Images are appearing on top of each other when used with Vue.js
I recently submitted a question to StackOverflow w/r/t how to implement custom navigation with vue-flickity: https://stackoverflow.com/questions/46736846/custom-navigation-for-vue-flickity
Thoughts?
Hi 🖐️ , when I tried to minify my project (which does NOT contain any ES6 syntax), I still had an error looking like there is ES6 syntax somewhere... :
ERROR in app/public/javascripts/all.js from UglifyJs
Unexpected token punc «(», expected punc «:»
I couldn't understand why, until I found out it was caused by this module being in ES6 !
I'll probably just copy your flickity.vue
file into my project and fix it with "old school" syntax so the solution is simple.
But I wrote this issue anyway to check if you plan to do something about it ? 🙂
...and to leave traces of this on the internetsss, in case it helps someone !
Hi,
Similarly with @angelorc's issue when using a custom component with v-for, the slides are rendered outside flickity's viewport. Tried the solution @exxy provided to no avail.
This doesn't work
<flickity v-if="Object.keys(components).length > 0" ref="flickity" :options="flickityOptions">
<picker-slide v-for="(item, index) in components" :key="index"
:name="index"
:item="item"/>
</flickity>
This works
<flickity v-if="Object.keys(components).length > 0" ref="flickity" :options="flickityOptions">
<div class="carousel-cell" v-for="(item, index) in components" :key="index"
:name="index"
:item="item">
{{ item.name }}
</div>
</flickity>
The weird thing is, it only won't work on first render. If I return back to the page where the flickity slider is, it's rendered nicely. Same behaviour when using custom components inside the div on the 2nd method. On first render they will render weirdly, and when I return to that page. it's all rendered as intended.
Would it be possible to add these functions?
my vue code :
import Flickity from 'vue-flickity'; export default { data () { return { flkty:{}, flickityOptions: { initialIndex: 2, prevNextButtons: false, pageDots: false, adaptiveHeight:true, autoPlay: true, setGallerySize:true, cellAlign: 'left', contain: true, freeScroll: true, wrapAround: false }, mounted: function() { var elem = document.querySelector('.flickity-enabled'); self.flkty = new Flickity(self.$el, self.flickityOptions); } }
But I Got TypeError: _vueFlickity2.default is not a constructor
Hey,
Is it possible to use staticClick with this Vue version of Flickity?
If not, would it be possible to add it?
Thanks for your work,
Antoine
I'm trying to display an image counter which gets the selectedIndex()
via computed properties however the selectedIndex()
is never updated. Should this plugin react to flickity events so Vue knows when to update the computed properties?
Tried to use fade option from flickity v2.2 it doesn't work.
in template
<flickity
class="carousel"
ref="carousel"
:options="flickityOption"
>
<div
class="carousel-cell carousel-slide"
v-for="(item, i) in slides"
:key="`product-slide-${i}`"
>
<img class="" :src="item.image" alt="">
<img class="" :src="item.desc" alt="">
</div>
</flickity>
in script
export default {
name: 'carousel',
data() {
return {
flickityOption: {
fade: true,
},
slides: [
{
image: 'https://picsum.photos/944/775/?image=52',
desc: 'https://picsum.photos/944/775/?image=53',
},
{
image: 'https://picsum.photos/944/775/?image=54',
desc: 'https://picsum.photos/944/775/?image=55',
},
{
image: 'https://picsum.photos/944/775/?image=56',
desc: 'https://picsum.photos/944/775/?image=57',
},
{
image: 'https://picsum.photos/944/775/?image=58',
desc: 'https://picsum.photos/944/775/?image=59',
},
{
image: 'https://picsum.photos/944/775/?image=60',
desc: 'https://picsum.photos/944/775/?image=61',
},
{
image: 'https://picsum.photos/944/775/?image=62',
desc: 'https://picsum.photos/944/775/?image=63'
},
]
}
},
mounted() {
this.$nextTick(async () => {
await this.sleep(1500);
const instance = this.$refs.carousel;
instance.rerender();
instance.reloadCells();
});
},
methods: {
next() { this.$refscarousel.next(); },
prev() { this.$refs.carousel.previous(); },
},
}
This is an implementation question.
Works great with coloured background divs like in the example, but images come in late, after the plugin has fired. How does one load images with Flickity in Vue? Use nextTick somehow?
In typical webpages an imagesLoaded callback does the trick. What is the equivalent strategy in a vue component?
I get this error
Uncaught Error: Cannot find module "flickity"
my slider is show all the item on it, i only want to show it one by one and other are hide when one of them show
<template>
<div>
<flickity ref="flickity" :options="flickityOptions">
<div class="carousel-cell text-center p-4">slide 1</div>
<div class="carousel-cell text-center p-4">slide 2</div>
<div class="carousel-cell text-center p-4">slide 3</div>
<div class="carousel-cell text-center p-4">slide 4</div>
<div class="carousel-cell text-center p-4">slide 5</div>
</flickity>
</div>
</template>
<script>
export default {
component: {
},
data () {
return {
flickityOptions : {
"autoPlay": 5000,
"pageDots": false,
"prevNextButtons": false,
"resize": true,
}
}
}
}
</script>
this is my code and it was showing slide 1 - slide -5 on the page
report error as follow:
npm install vue-flickity --save
npm ERR! registry error parsing json
npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "vue-flickity" "--save"
npm ERR! node v6.3.1
npm ERR! npm v3.10.9
npm ERR! Unexpected token < in JSON at position 0
npm ERR! <html>
npm ERR! <head><title>403 Forbidden</title></head>
npm ERR! <body bgcolor="white">
npm ERR! <center><h1>403 Forbidden</h1></center>
npm ERR! <hr><center>nginx</center>
npm ERR! </body>
npm ERR! </html>
When I go back to a previous route, the carousel will flicker and return to the left generally. If there are multiple images, the images will for a brief moment stack on top of each other making it extremly obvious.
Anyone else experienced this & know a fix? I confirmed this was the case with default settings as well as multiple ones.
Nuxt, using it as a plugin & wrapping the flickity-component in client-only.
Hi,
sorry to write over here, but I don't get it how to use the
append
function with vue-flickity.
this.$refs['flickityCarousel_' + this.uid].append('<div>Append this thing into my carousel</div>')
is not working. I would like to append a new slice, once my slider is mounted.
If I put a console.log into the vue-flickity.vue file for testing, I've got my element in the console, but it's not append to the carousel.
Any clue?
Thanks
Hi, it is look like vue-flickity does not work when using Vue with TypeScript.
My code is:
import Flickity from 'vue-flickity'
Then i get the following error.
TS2307: Cannot find module 'vue-flickity'.
Does anyone have the error like this, Thank you.
I added a ref="flickity" property to my component, but it is not accessible via this.$refs.flickity, even in the mounted() function. I tried suggestions from this thread and this thread but nothing worked. Does anyone know why this is happening?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.