Owl Carousel Auto Height Not Working

  • I’m working with an Owl carousel that has both video and images. It is set to auto height. The thumbnail image is adjusting the height as I scroll through the slider. But once I press the play button for the video, the video that appears is cut off, making the player controls not visible.

    I’ve been banging my head against a wall on this one. Any help would be greatly appreciated. Thanks in advance!

    Here are the settings for the owl carousel:

    <script>
    $(document).ready(function(){
        //Initialize Owl Carousel Javascript
        $(".owl-carousel").owlCarousel({
        items: 1,
        loop: true,
        nav: true,
        center: 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,
    });

    });
</script>

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter robertrhu

    (@robertrhu)

    Here’s the html/PHP for the slider:

    `<div id=”property-slider”>
    <ul class=”owl-carousel”>
    <?php if( have_rows(‘project_photos’) ): ?>
    <?php while( have_rows(‘project_photos’) ): the_row();
    //Variables
    $photo = get_sub_field(‘project_photo’);
    $photofull = get_sub_field(‘project_photo_full’);
    $alt = get_sub_field(‘project_photo_alt’);
    $Vedio = get_sub_field(‘project_video’);
    ?>
    <li class=”slide test”>
    <?php if($Vedio){ ?> “> <?php } else { ?>
    <img class=”slide-image slide-image-cropped”
    src=”<?php echo $photo; ?>”
    alt=”<?php echo $alt; ?>” />
    <img class=”slide-image slide-image-full”
    src=”<?php echo $photofull; ?>”
    alt=”<?php echo $alt; ?>” />
    <?php } ?>

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

    </div>’

Viewing 1 replies (of 1 total)
  • The topic ‘Owl Carousel Auto Height Not Working’ is closed to new replies.