How to use flickity - 9 common examples

To help you get started, we’ve selected a few flickity examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github benjamincharity / angular-flickity / src / flickity.service.js View on Github external
id = this.instances.length + 1;
                }
            }

            // Check to see if the ID is already in use
            if (this._findObjectById(this.instances, id)) {
                const index = this._getFlickityIndex(id);
                this.$log.error(`This ID is already in use: `, this.instances[index]);

                reject(`This ID is already in use.`);
            }

            // Define the new instance
            const instance = {
                id: id,
                instance: new flickity(element, options),
            };

            // Save this instance to the array
            this.instances.push(instance);

            // Bind to all events
            return this._bindEvents(id).then(() => {
                return resolve(instance);
            });
        });
    }
github kittn / generator-kittn / generators / app / templates / contentBuilder_stuff / js / flickity-package.js View on Github external
let flkty

            // If Slidertransport is not used as Wrapper yield data from the main slider wrapper
            const sliderTransport = slider.querySelector('.flickity-custom__transport') || slider

            // Check if the right Data Attr is available, otherwise use an empty object
            const preCustomData =
              sliderTransport.hasAttribute('data-myflickity')
                ? JSON.parse(sliderTransport.dataset.myflickity)
                : {}

            // Merging with Defaults
            const customData = Object.assign(flickityDefaults, preCustomData)

            // Init Flickity
            flkty = new Flickity(sliderTransport, customData)

            // Fix Height
            flkty.resize()
            slider.classList.add('is-visible')
          })
        }
github datosgobar / consulta-publica / ext / lib / site / cards-slider / component.js View on Github external
componentDidUpdate () {
    if (this.flkty) this.flkty.destroy()
    const options = {
      cellAlign: 'left',
      draggable: false,
      // friction: 0.2,
      contain: true,
      pageDots: false,
      groupCells: window.matchMedia('(min-width: 1024px)').matches ? 3 : 1
    }
    this.flkty = new Flickity(this.refs.carrusel, options)
  }
github springload / frontend-starter-kit / core / static_src / js / components / modals / SlideshowModal.js View on Github external
componentDidMount() {
        const { wrapper } = this.refs;

        const elem = wrapper.querySelector('.main-gallery');
        if (elem && typeof Flickity !== 'undefined') {
            const flkty = new Flickity( elem, {
                prevNextButtons: false,
                setGallerySize: false,
                wrapAround: true,
                accessibility: true,
                pageDots: false,
            });

            this.flkty = flkty;

            // focus on flkty
            setTimeout(() => {
                const flktyEl = wrapper.querySelector('.main-gallery');
                flktyEl.tabIndex = 0;
                flktyEl.focus();
            }, 250);
        }
github benjamincharity / angular-flickity / src / flickity.service.js View on Github external
return new Promise((resolve, reject) => {
            const instance = flickity.data(element)

            if (instance) {
                // Return the instance
                return resolve(instance);
            } else {
                return reject('Instance not found for ' + element);
            }
        });
    }
github TheScienceMuseum / collectionsonline / client / lib / listeners / carousel.js View on Github external
wrapAround: thumbnails.length >= 3,
      setGallerySize: false,
      pageDots: false,
      imagesLoaded: true,
      lazyLoad: 1,
      arrowShape: {
        x0: 30,
        x1: 63.5,
        y1: 50,
        x2: 70,
        y2: 45.5,
        x3: 40
      }
    });

    var flkty = Flickity.data(carousel);
    ctx.carousel.on('select', function () {
      if (navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
        document.querySelector('#openseadragon').style.width = '100%';
      }
      Array.prototype.slice.call(thumbnails).forEach((el) => {
        el.classList.remove('record-imgpanel__thumb--selected');
      });
      if (thumbnails[flkty.selectedIndex]) {
        thumbnails[flkty.selectedIndex].classList.add('record-imgpanel__thumb--selected');
        captions.forEach((el) => showHide('record-imgpanel__caption', flkty, el));
        zooms.forEach((el) => showHide('openseadragon-toolbar', flkty, el));
        rights.forEach((el) => showHide('cite__method', flkty, el));
        useImage.forEach((el) => showHide('cite__button', flkty, el));
      }
    });
github emoji-gen / web-main / frontend_old / view / components / organisms / recently / index.js View on Github external
ready() {
    this.flkty = new Flickity(this.$els.carousel, {
      contain: true,
      setGallerySize: false,
      wrapAround: true,
    })

    this.$http.get('/api/histories')
      .then(res => {
        this.histories = res.json()
      })
  },
github emoji-gen / web-main / frontend / src / components / organisms / RecentlyLog.vue View on Github external
this.$nextTick(() => {
        this.flkty = new Flickity(
          this.$refs.carousel,
          {
            contain: true,
            setGallerySize: false,
            wrapAround: true,
          })

        const baseNode = document.createElement('div')
        baseNode.className = 'carousel-cell'

        for (const recentlyLog of this.recentlyLogs) {
          const node = baseNode.cloneNode(true)
          node.style.backgroundImage = `url('${recentlyLog.url}')`
          node.title = recentlyLog.text.replace(/\n/g, '')
          this.flkty.append(node)
        }
github moedevs / hifumi.io / src / js / ui.js View on Github external
import { $, $$ } from './utils';
import Flickity  from 'flickity';

const slides = $$('.twitter-slides');
const flkty = new Flickity(slides, {
  cellAlign: 'center',
  freeScroll: true
});

const toggleVisibility = node => {
  const isHidden = node.style.display === 'none';
  if (isHidden) {
    const { display } = node.dataset;
    node.style.display = display;
  } else {
    node.dataset.display = node.style.display;
    node.style.display = 'none';
  }
};

const toggleAllInGroup = (target) => {

flickity

Touch, responsive, flickable carousels

GPL-3.0
Latest version published 3 years ago

Package Health Score

61 / 100
Full package analysis

Popular flickity functions