Owl Carousel Center Folie mit besonderer Klasse

Question

Gehen von Owl Carousel Docs können Sie to.owl.carousel zu einer bestimmten Folie navigieren.

Ich habe ein Miniatur-Karussell über den oberen Rand der Seite, die ich eine Klasse hinzugefügt haben, um Elemente, die die aktuelle Seite sind (Klasse heißt thisPatient).

Ich würde gerne das Center-Karussell verwenden und es so einrichten, dass das Karussell-Element mit der thisPatient-Klasse beim Laden der Seite zentriert ist. Wie kann das gemacht werden?

Ich habe festgestellt, dass to.owl.carousel die ID einer Folie erfordert, um zu navigieren, aber ich muss dies konvertieren, um die ID der Folie mit der bestimmten Klasse zu erhalten.

Beispiel hierfür kann bei development.bellavou.co.uk/patient-stories/allison

zu sehen Dies ist derzeit, was ich habe:

$(".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} 
    }}); 
}); 

Da federt ein verwendet 0-index wie die index() funktion, beginnend bei dieser nummer und zentriert es macht das karussell funktioniert so, wie sie es wollten.