Skip to content

Instantly share code, notes, and snippets.

@bidah

bidah/flickity.vue

Created Sep 8, 2017
Embed
What would you like to do?
/**
* Flickity Component
* Flickity Version: 2.0.9
* @link https://github.com/drewjbartlett/vue-flickity/blob/master/flickity.vue
*/
<style lang="scss">
@import "../../../scss/libs";
@import "../../../scss/settings";
.flickity-enabled {
position: relative;
}
.flickity-enabled:focus { outline: none; }
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
}
/* draggable */
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: grabbing;
}
/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
position: absolute;
top: 50%;
width: 40px;
height: 40px;
border: none;
background: transparent;
cursor: pointer;
transform: translateY(-50%);
//z-index: 2;
}
.flickity-prev-next-button:hover { background: transparent; }
.flickity-prev-next-button:focus {
outline: none;
}
.flickity-prev-next-button:active {
opacity: 0.6;
}
.flickity-prev-next-button.previous { left: 0; }
.flickity-prev-next-button.next { right: 0; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 10px;
}
.flickity-prev-next-button:disabled {
opacity: 0.3;
cursor: auto;
}
.flickity-prev-next-button svg {
position: absolute;
top: 24%;
left: 20%;
width: 50%;
height: 50%;
}
.flickity-prev-next-button .arrow {
fill: #fff;
}
/* ---- page dots ---- */
// .flickity-page-dots {
// position: absolute;
// width: 100%;
// bottom: -25px;
// padding: 0;
// margin: 0;
// list-style: none;
// text-align: center;
// line-height: 1;
// }
//
// .flickity-rtl .flickity-page-dots { direction: rtl; }
//
// .flickity-page-dots .dot {
// display: inline-block;
// width: 10px;
// height: 10px;
// margin: 0 8px;
// background: #333;
// border-radius: 50%;
// opacity: 0.25;
// cursor: pointer;
// }
//
// .flickity-page-dots .dot.is-selected {
// opacity: 1;
// }
</style>
//HTML
<template>
<div>
<slot></slot>
</div>
</template>
//JS
<script>
import Flickity from "flickity";
export default {
props: {
options: {
type : Object,
default () {
return {};
}
},
},
mounted() {
this.flickity = new Flickity(this.$el, this.options);
},
beforeDestroy() {
this.flickity.destroy();
this.flickity = null;
},
methods: {
next (isWrapped, isInstant) {
this.flickity.next(isWrapped, isInstant);
},
previous (isWrapped, isInstant) {
this.flickity.previous(isWrapped, isInstant);
},
select (index, isWrapped, isInstant) {
this.flickity.select(index, isWrapped, isInstant);
},
selectCell (value, isWrapped, isInstant) {
this.flickity.selectCell( value, isWrapped, isInstant );
},
resize () {
this.flickity.resize();
},
reposition () {
this.flickity.reposition();
},
prepend (elements) {
this.flickity.prepend(elements);
},
append (elements) {
this.flickity.append(elements);
},
insert (elements, index) {
this.flickity.insert(elements, index);
},
remove (elements) {
this.flickity.remove(elements);
},
playPlayer () {
this.flickity.playPlayer();
},
stopPlayer () {
this.flickity.stopPlayer();
},
pausePlayer () {
this.flickity.pausePlayer();
},
unpausePlayer () {
this.flickity.unpausePlayer();
},
destroy () {
this.flickity.destroy();
},
reloadCells () {
this.flickity.reloadCells();
},
getCellElements () {
this.flickity.getCellElements();
},
data () {
return Flickity.data(this.$el);
},
on (eventName, listener) {
this.flickity.on(eventName, listener);
},
off (eventName, listener) {
this.flickity.off(eventName, listener);
},
once (eventName, listener) {
this.flickity.once(eventName, listener);
}
}
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.