metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.53k stars 602 forks source link

Flickity Modal is not work #898

Closed Majita24 closed 5 years ago

Majita24 commented 5 years ago

Hello, I am trying to use Flickity in a modal window, when calling the modal window, the carousel is loaded perfectly, however, I realized that the images do not manage to slide, these are activated when making a small resize the size of the screen.

I followed these references in order to solve the problem, however I still can not find a solution.

https://github.com/metafizzy/flickity/issues/797 https://flickity.metafizzy.co/api.html#sizing-and-positioning

Here my line code

html

span class="cs-pointer flex-c-m size2" data-toggle="modal" data-target="#modal-video-1"></span

vanilla JS

<script type="text/javascript">
    var carousel = document.querySelector('.main-carousel');
    var flkty = new Flickity( carousel);

    var showButton = document.querySelector('.modal-video-1');
    showButton.addEventListener( 'click', function() {
    // un-hide carousel
    carousel.style.display = 'block';
    // Flickity resize
    flkty.resize();
    });

here page web, click in icon camera.

http://motolineperu.net/devweb/index.php

desandro commented 5 years ago

Looks like you're missing a comma in your code after carousel. It should be:

var flkty = new Flickity(carousel, {
        cellAlign: 'left',
        contain: true,
        resize: true,
        autoPlay:true,
    });