Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fullscreen button not appearing #42

Open
gipic opened this issue Aug 3, 2024 · 2 comments
Open

Fullscreen button not appearing #42

gipic opened this issue Aug 3, 2024 · 2 comments

Comments

@gipic
Copy link

gipic commented Aug 3, 2024

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
Copy link

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
Copy link
Author

gipic commented Aug 17, 2024

Have you tried? Does it work to you?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@gipic @archonium-github