How to use flickity - 9 common examples

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);
            });
        });
    }

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')
          })
        }

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)
  }

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);
        }

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);
            }
        });
    }

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));
      }
    });

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()
      })
  },

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)
        }

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) => {