Вопрос:

Сова Карусель 1px Высота

video height owl-carousel

546 просмотра

2 ответа

46 Репутация автора

У меня есть слайдер, который может хранить видео или изображения Vimeo / Youtube.

Видео является первым слайдом.

При загрузке страницы первый слайд имеет фоновое изображение, извлеченное из видеосервиса (vimeo / youtube) и, по-видимому, играет роль в свертывании классов .owl-stage-external .owl-height до высоты 1 пикселя. После того, как я перейду к следующему слайду и затем вернусь, появится фоновое изображение видео / видео и правильно установит высоту для этих классов.

Я искал так много предложенных решений, но не нашел ничего, что помогло бы решить проблему. Кажется, многие боролись с подобной проблемой.

Это буквально последняя ошибка, которую я должен исправить на этом сайте. Было бы так здорово, если бы у кого-то было дополнительное понимание.

Я пытался использовать плагин с именем imagesLoaded, как это было предложено в репозитории Owl Git, но он выдает ошибку «imagesLoaded не является функцией». Javascript установлен правильно. Я не уверен, почему его не распознают.

Я пробовал оба способа инициализации: $ (window) .load (function () {и $ (document) .ready (function () {

Хотелось бы иметь исправление, которое является родным для Совы. Была ли эта проблема успешно решена? Был бы так благодарен за некоторую помощь.

Спасибо!

Вот пример страницы: http://desrosiers.robertrhu.com/

Это код, с которым я работаю:

<?php

/* Home Page image Slider */

?>

<script>
    $('.item-video').imagesLoaded({
        background: true
    }, function( imgLoad ) {
        $status.text( imgLoad.images.length + ' images loaded checking backgrounds' );
    }
                          );
</script>

<script>
    $(window).load(function(){
    //Initialize Owl Carousel Javascript
    $("#home-slider").owlCarousel({
        items: 1,
        loop: true,
        nav: true,
        navText: [
            "<img src='<?php echo get_template_directory_uri(); ?>/assets/images/desrosiers-architects-image-slider-arrow.png' />",
            "<img src='<?php echo get_template_directory_uri(); ?>/assets/images/desrosiers-architects-image-slider-arrow.png' />"
        ],
        margin: 0,
        dots: false,
        autoplay: false,
        animateOut: 'fadeOut',
        video: true,
        responsive: true,
        autoHeight:true,


    });
    // var mainCarousel = $("#home-slider");
    // mainCarousel.find('.owl-stage .slide').css('height', mainCarousel.find('.owl-stage-outer').height());

});
</script>
<!--Begin Home Page Property Hero Slider-->

<ul id="home-slider"
class="owl-carousel">

<?php if( have_rows('home_page_slider', 'option') ): ?>
    <?php while( have_rows('home_page_slider', 'option') ): the_row();

    //Variables
    $image = get_sub_field('home_page_photo', 'option');
    $vedio = get_sub_field('homepage_vedio', 'option');
    $alt = get_sub_field('home_page_photo_alt', 'option'); ?>

    <li class="slide item-video">
 <?php  if(!empty( $vedio) ){ ?> <a class="owl-video" href="<?php echo $vedio; ?>"></a> <?php } else { ?>
      <img class="slide-image"
             src="<?php echo $image; ?>"
             alt="<?php echo $alt; ?>" />
<?php  } ?>
    </li>

    <?php endwhile; ?>
<?php endif; ?>

</ul>
Автор: user5176291 Источник Размещён: 11.01.2018 02:55

Ответы (2)


2 плюса

46 Репутация автора

Решение

Придумали решение.

var carTimer = setInterval(function() {
    if(owlCar.height() > 1) clearInterval(carTimer);
    owlCar.trigger('refresh.owl.carousel', [100]);
}, 300);

Здесь owlCar является примером совы карусели

( var owlCar = $(".owl-carousel").owlCarousel({options}) )

Мы запускаем событие обновления для совы каждые 300 мс, пока она не достигнет высоты. Как только он достигает высоты, событие больше не срабатывает. window.load не работал, потому что сайт загружается медленно.

Надеюсь, это может помочь кому-то еще.

Автор: user5176291 Размещён: 15.01.2018 11:43

0 плюса

1 Репутация автора

если у вас есть несколько классов, вы можете использовать это:

var owlCar = $('.owl-carousel').owlCarousel({
        items       : 1,
        margin      : 10,
        loop        : true,
        autoHeight  : true
    });

    var length = $(".owl-stage-outer").length;

    var carTimer = setInterval(function(){
        var gotheight = true;
        for(var i=0; i<length; i++){
            if($(".owl-stage-outer").eq(i).height() < 2){
                gotheight = false;
                break;
            }
        }

        if(gotheight)
            clearInterval(carTimer);
        else
            owlCar.trigger('refresh.owl.carousel', [100]);         
    }, 300);

эта работа для меня.

Автор: zhliow Размещён: 28.05.2019 03:38
Вопросы из категории :
32x32