Owl 轮播在有输入时看到两张幻灯片

Question

当我输入一个 div 时，我有一个奇怪的行为（用玉）当我只在 div 幻灯片上放置标签时，没有问题。

但是当我尝试设置输入时，我同时看到了 slide1 和 slide2（请参阅下面的问题和代码）。

除 Bootstrap 外，任何样式都应用于输入。即使我删除了所有样式并使用最小值，输入也会导致问题。

div#owl-example.owl-carousel
        div 
            legend Which Type ?
            div.choice
                div.choice1
                    h2 Choice 1
                div.choice2
                    h2 choice2
        div
            legend Operating data
            div.row
                div.col-md-6
                    div.input-style
                        label Email : 
                            input(type='text', name="email",placeholder="placeholder", autofocus="autofocus" )
                    div.input-style
                        label Name : 
                            input(type='text', name="name",placeholder="placeholder")
                div.col-md-6
                    div.input-style
                        label adress : 
                             input(type='text', name="adress",placeholder="placeholder")

当我删除输入时，一切正常。任何人有解决它的想法？

我真的不知道...

Answer 1

我认为您的问题与旋转木马初始化后立即接收焦点的文本输入有关。我创建了一个 fiddle，它可能会重现您的问题。由于 fiddle 的性质，默认情况下它不会将焦点设置到幻灯片文本输入，因此我不得不使用 jQuery focus().[= 模拟（我认为）在您的页面上发生的情况12=]

https://jsfiddle.net/Lgn3wqeq/1/

我自己遇到了这个问题，想出了一个相当老套的解决方案，将焦点设置到页面上的另一个元素，并且只在特定幻灯片可见时才将焦点设置在轮播幻灯片的文本输入上（也需要延迟焦点开始直到 css 转换完成）。你可以这样做：

$('.myCarousel').owlCarousel({
    singleItem: true,
    afterAction: function (elem) {
        var item = elem.find('.item').eq(this.currentItem);
        setTimeout(function () { item.find('input').eq(0).focus(); }, 800);
    }
});

Owl 轮播在有输入时看到两张幻灯片

Owl Carousel see two slides when have input

css

jquery

node.js

owl-carousel

pug