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

通过猫头鹰旋转木马文档，您可以使用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} 
    } 
});

来源

2017-02-22 Lee

如果添加var start = $（'。thisPatient'）。index（）;并拥有startPosition：作为owlCarousel选项之一开始，它是以幻灯片为中心还是左对齐？ – mikeg542

也没有，它似乎离开旋转木马时导航到其他配置文件固定 – Lee

[Codepen链接]（http://codepen.io/anon/pen/aJoYVa）我有它在这里工作 - 做这样的工作给你吗？ – mikeg542

$(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使用像索引（）函数那样的0-索引，从该数字开始并居中，使得旋转木马功能就像您所期望的那样。

来源

2017-02-23 14:00:44 mikeg542

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

回答

相关问题