Question

我正在尝试根据用户选择来确定特定元素的中心。我有一些按钮和一个猫头鹰传送带（我正在使用猫头鹰传送带2）。现在，我的中间元素是轮播中的第一个元素。但是，如果用户单击按钮，则需要轮播“旋转”到特定项目并将此元素放在轮播的中心。

我试图通过onclick事件触发猫头鹰的位置，但失败了。

HTML：

<button id="btnToElementOne">First Button</button>
<button id="btnToElementFive">Second Button</button>
<button id="btnToElementEight">Third Button</button>
。
。
。

    <div id="ElementOne" class="owlItem" style="background-image: url('---------');">
        <div class="owlItemHolder" style="">
    ................
        </div>
    </div>

...

    <div id="ElementFive" class="owlItem" style="background-image: url('---------');">
        <div class="owlItemHolder" style="">
    ................
        </div>
    </div>

...

    <div id="ElementEight" class="owlItem" style="background-image: url('---------');">
        <div class="owlItemHolder" style="">
    ................
        </div>
    </div>

轮播：

    $('.owl-carousel').owlCarousel({
        loop:true,
        center: true,
        margin:40,
        nav:true,
        dots: false,
        autoplay:false,
        autoplayTimeout:4000,
        animateOut: 'fadeOut',
        animateIn: 'fadeIn',
        responsive:{
                    0:{
                    items:5
                },
                600:{
                    items:5
                },
                1000:{
                    items:5
                }
            }
        });
        var owl = $('.owl-carousel');
        $(document.documentElement).keyup(function(event) {    
            if (event.keyCode == 37) { /*left key*/
                owl.trigger('prev.owl.carousel', [700]);
            } else if (event.keyCode == 39) { /*right key*/
                owl.trigger('next.owl.carousel', [700]);
            }
        });

我希望轮播在单击“第一个按钮”后放置在元素1的中心，在单击第二个按钮后在元素5的中心放置，等等。

基于按钮单击的居中元素

0 个答案: