Materialisecss Карусель слайдер модальный - PullRequest
Новая
       23

Materialisecss Карусель слайдер модальный

0 голосов
/ 17 мая 2018

У меня есть некоторые проблемы при интеграции моего материализованного карусельного слайдера в модал.Я не могу найти проблему, и я не могу найти возможное решение через Google или веб-сайт materializecss.Итак, вот мой вопрос:

Я создал галерею, где вы нажимаете на изображение, вы открываете модал со встроенным ползунком fullWidth.Открытие модального режима работает нормально, но я не вижу свои изображения внутри модального окна вообще.Только если я изменю размер браузера, изображения появляются.

Я работаю с angular5 и использую materializecss для дизайна моей страницы.

(я знаю, что есть пакет @ angular / material и ng2-materialize npm, который намного лучше подходит, но я только начал разрабатывать с angular5, поэтому я подумал изучить только одну новую платформу (angular5) и использоватьдля всех остальных вещей уже знакомые вам фреймворки (materializecss))

Сначала я подумал, что это проблема с моим приложением angular5, поэтому я попытался создать модал с карусель-слайдером внутри по-родному (значитбез угловых5).Как вы можете видеть в моем JSFiddel (https://jsfiddle.net/davetwog/vfkbzu5m/) я сталкиваюсь с той же проблемой. 

<button data-target="img-modal" class="btn modal-trigger" onClick="$('.carousel').carousel('set', 2);">Modal</button>

<div id="img-modal" class="modal">
  <div class="modal-content">
    <div class="carousel carousel-slider center">
      <a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00290.jpg"></a>
      <a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00383.jpg"></a>
      <a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00445.jpg"></a>
      <a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00448.jpg"></a>
      <a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00453.jpg"></a>
    </div>
  </div>
</div>


<script>
$(document).ready(function() {
    $('.modal').modal();

    $('.carousel').carousel({
       fullWidth: true
    });

});
</script>

Кто-нибудь знает, что я делаю неправильно? Или это известная проблема в frameworkizeizecss

Ответы [ 2 ]

0 голосов
/ 15 апреля 2019

Другое решение с Jquery 3.3.1 и Materialise 1.0.0: 

$('.modal').modal({
    'onOpenEnd': initCarousel
});

function initCarousel() {
   $('.carousel').carousel()
}
0 голосов
/ 17 мая 2018

Обновлен JSFiddel

Высота карусели рассчитывалась как 0px, потому что модал был скрыт.Таким образом, карусель имела нулевую высоту.

Я раздвоил ваш пример и обновил JS, чтобы использовать функции инициализации Materialise.При инициализации модального режима я использовал опцию onOpenEnd, чтобы указать функцию, которая будет инициализировать карусель после открытия модального режима, в результате чего получится карусель с высотой. 

$(document).ready(function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, {
        'onOpenEnd': initCarouselModal
    });

    function initCarouselModal() {
        var elems = document.querySelectorAll('.carousel');
        var instances = M.Carousel.init(elems, {'fullWidth': true});
        instances[0].set(2);
    }
});

Надеюсь, что это полезно.

...