猫头鹰旋转木马中心幻灯片与特定类

Question

通过Owl Carousel文档，您可以使用to.owl.carousel导航到特定的幻灯片。

我在页面顶部有一个缩略图轮播，我已经为当前页面的项目添加了一个类（类称为thisPatient）。

我想使用中心轮播，并使其具有thisPatient类的轮播项目以页面加载为中心。怎么办呢？

我注意到to.owl.carousel需要幻灯片的ID才能导航，但我需要将其转换为获取应用了特定类的幻灯片的ID。

这方面的例子可以在development.bellavou.co.uk/patient-stories/allison看到

这是我目前所拥有的：

$(".patient-story-strip").owlCarousel({
    dots:false,
    loop:true,
    margin:10,
    stagePadding:50,
    lazyLoad:true,
    center:true,
    responsive:{
        0:{items:3},
        768:{items:9},
        1200:{items:13}
    }
});

Answer 1

$(document).ready(function(){
    var start = $('.patientInfo').index();
    $(".owl-carousel").owlCarousel({
        dots:false,
        loop:true,
        items: 13,
        startPosition: start,
        center:true,
        responsive:{
            0:{items:3},
            768:{items:9},
            1200:{items:13}
    }});
});

由于startPosition使用像index（）函数这样的0索引，从该数字开始并居中，使得旋转木马功能就像你所瞄准的那样。