Question

HTML：

<a href="#" class="click-to-me">click to me</a>
<div class="wrapper">
    <div class="owl-carousel owl-theme">
        <div class="item"><h4>1</h4></div>
        <div class="item"><h4>2</h4></div>
        <div class="item"><h4>3</h4></div>
        <div class="item"><h4>4</h4></div>
        <div class="item"><h4>5</h4></div>
        <div class="item"><h4>6</h4></div>
        <div class="item"><h4>7</h4></div>
        <div class="item"><h4>8</h4></div>
        <div class="item"><h4>9</h4></div>
        <div class="item"><h4>10</h4></div>
        <div class="item"><h4>11</h4></div>
        <div class="item"><h4>12</h4></div>
    </div>
</div>

JS：

let $slider =  $('.owl-carousel');
let slide = 0;

$('.owl-carousel').owlCarousel({
        smartSpeed: 600,
        items: 3,
        autoHeight: true,
        dots: false,
        margin: 20,
        mouseDrag: false,
})

let $wrapper = $('.wrapper');

$('.click-to-me').on('click', function(e) {
  e.preventDefault();
  slide++;
  $wrapper.css('display', 'none');
  $slider.trigger('to.owl.carousel', slide);
  $wrapper.css('display', 'block');

  // If you remove this line, the slides after clicking on the button will disappear.
  $slider.trigger('refresh.owl.carousel');
});

CSS：

.item {
  background-color: gray;
  height: 100px;
}

当您由于某些原因单击链接click to me猫头鹰轮播时，会将幻灯片压缩到零高度，然后恢复其高度。是否有可能做到这一点？有两个条件：

禁止删除显示：从父级删除任何显示（或允许删除，但必须以某种方式隐藏滑块。与此同时，不要占用它的空间（ visiblity: hidden不适合））。
禁止删除滑块设置中的autoHeight: true。

是否可以使猫头鹰轮播在滚动显示时不改变幻灯片的高度：父级上没有？

0 个答案: