Support » Plugin: Owl Carousel » Owl Carousel Auto Height Not Working

  • robertrhu

    (@robertrhu)


    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.