Слик отзывчивый сломан - PullRequest
Новая
       40

Слик отзывчивый сломан

0 голосов
/ 18 января 2020

Моя проблема:

Я использовал слик много раз на странице, он работает довольно хорошо, но когда я не на полном экране, он показывает только изображения первого диапо.

Я имею в виду, что вы можете видеть все диапозоны, но если вы нажмете один раз, вы увидите галерею, и если вы уйдете и попытаетесь увидеть другую диапозию, она не загрузится, пока вы не используете стрелку для go влево / вправо.

Вот JS пятна: 

jQuery(document).ready(function( $ ) {

    $('.containerImage').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        fade: true,
        nextArrow: '<i class="fa fa-chevron-right"></i>',
        prevArrow: '<i class="fa fa-chevron-left"></i>',
    }); 

    let singleRealisation = $('.single.single-realisation');

    if (singleRealisation.length) {

        $('.imageContainer').on('click', function(){

            $('.containerImage').slick('resize');   

            $(this).next('.modalContent').addClass('test').css('display', 'block');

            $('body').css('overflow', 'hidden');
            console.log('triggerClicked');
        });

        var modal = document.querySelector(".modalContent");
        var span = document.querySelectorAll(".close");

        span.forEach(function(item, index){
            $(item).on('click', function(){
                $('.modalContent.test').css('display', 'none');
                $('body').css('overflow', 'auto');
            });
        });

        $(window).on('click', function(e){
            if (e.target.className == 'modalContent test') {
                $('.modalContent.test').css('display', 'none');
                $('body').css('overflow', 'auto');
            }
        });
    }

    $('.js-scrollTo').on('click', function() { // Au clic sur un élément
        var page = $(this).attr('href'); // Page cible
        var speed = 750; // Durée de l'animation (en ms)
        let idBloc = $(this).attr('href').substr(1);
        $('#'+idBloc).css('margin-top', 0);
        $('html, body').clearQueue().stop().animate( { 
            scrollTop: $(page).offset().top 
        }, speed);
        return false;
    });

    $(window).on('resize orientationchange', function() {
      $('.containerImage').slick('resize');
    });
});

Я много чего перепробовал с "изменением размера" и ничего не получалось ..

Мой сайт в сети, так что проще, если вы go проверите это сами.

http://4fam.fr/realisation/evenementiels/

(Вам не нужно быть полноэкранным, чтобы увидеть проблему. Вы можете нажать на 1-й проект, используйте крестик к go назад и попробуйте загрузить другой проект).

...