Fullscreen button not appearing

gipic commented 1 month ago

Hi, I don't know what is wrong but there is no button. I've included fullscreen library (both css and js). I tried to switch the position between flickity core and flickity fullscreen but nothing.

BTW: why in the main documentation page, the container is called "main-caoursel" while with fullscreen is called just "carousel". It is confusing...

Thanks.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
    <link rel="stylesheet" href="https://unpkg.com/flickity-fullscreen@2/fullscreen.css">

    <style>
    .carousel-cell {
        border:1px solid green;
        height: 250px;
        width: 250px;

    }
    </style>
  </head>
  <body>
    <div class="carousel" data-flickity='{ "cellAlign": "left", "contain": true, "fullscreen": true }'>
        <div class="carousel-cell" style="border:1px solid green">Elemento 1</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 2</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 3</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 4</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 5</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 6</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 7</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 8</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 9</div>
        <div class="carousel-cell" style="border:1px solid green">Elemento 10</div>
    </div>

    <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
    <script src="https://unpkg.com/flickity-fullscreen@2/fullscreen.js"></script>

  </body>
</html>

archonium-github commented 3 weeks ago

I see this error in console:

TypeError: undefined is not an object (evaluating 'Flickity.create.fullscreen = function() { this.isFullscreen = false;

if ( !this.options.fullscreen ) return; // buttons this.viewFullscreenButton = new FullscreenButton( 'view', this ); this.exitFullscreenButton = new FullscreenButton( 'exit', this );

this.on( 'activate', this._changeFullscreenActive ); this.on( 'deactivate', this._changeFullscreenActive ); }')

gipic commented 3 weeks ago

Have you tried? Does it work to you?

metafizzy / flickity-fullscreen

Fullscreen button not appearing #42