0

I can't get the fullscreen button to show as documented here. I have added css and js sources so they are available in the browser:

I can add the is-fullscreen class to my parent carousel, getting fullscreen to kick in, but I just can't get the buttons to show up.

My flickity component (in pug) looks like:

flickity(class="carousel" ref="flickity" :options="flickityOptions" v-if='lotsLoaded')
  .carousel-cell(v-for='lot in lots')
    img(:src='lot.item.primary_image')

My flickity options (in coffeescript) are:

flickityOptions:
  prevNextButtons: true
  fullscreen: true

EDIT1: For my own troubleshooting, I am using the following libraries:

  • vue-flickity (vue-flickity@^1.1.2), which depends on:
    • flickity "^2.1.1" but in my Source Panel (webpack:///./node_modules/flickity/js/index.js) the file shows: Flickity v2.2.0
  • flickity-fullscreen@^1.1.1 which depends on:
    • flickity "^2.1.0"
Graham
  • 7,431
  • 18
  • 59
  • 84
RudyOnRails
  • 1,819
  • 3
  • 17
  • 26
  • What does your CSS look like? The documentation you linked seems to indicate you need to write your own – Phil Feb 14 '19 at 00:11
  • @Phil thank you for your discussion. I believe no written CSS is required because of their description `Enables fullscreen view of carousel. Adds button to view and exit fullscreen.` plus their lack of direction to insert CSS, and the fact that the CSS they provide is the CSS in their `flickity-fullscreen` library they say to include. – RudyOnRails Feb 14 '19 at 02:21
  • Right, thanks for the clarification. Their documentation didn't make it clear. Can you see the `` elements in your browser's _Elements_ console? This could be down to difficulties loading dynamic image sources. See [Vue.js dynamic images not working](https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working) – Phil Feb 14 '19 at 02:47
  • You're welcome @Phil. I can see the `img`'s in my Elements Panel, yes. – RudyOnRails Feb 14 '19 at 03:21

0 Answers0