貓頭鷹旋轉木馬中心幻燈片與特定類

通過貓頭鷹旋轉木馬文檔，您可以使用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

貓頭鷹旋轉木馬中心幻燈片與特定類

回答

相關問題