2017-02-22 15 views
0

Просматривая документы Owl Carousel, вы можете использовать to.owl.carousel для перехода к определенному слайду.Сова с карусельным центром со специальным классом

У меня есть миниатюрная карусель, проходящая по верхней части страницы, которую я добавил в класс, который является текущей страницей (класс называется thisPatient).

Я хотел бы использовать центральную карусель и иметь ее так, чтобы элемент карусели, у которого есть класс thisPatient, сосредоточен на загрузке страницы. Как это может быть сделано?

Я заметил, что для to.owl.carousel требуется идентификатор слайда для перехода к нему, но мне нужно его преобразовать, чтобы получить идентификатор слайда с примененным классом.

Пример этого можно увидеть на 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} 
    } 
}); 
+0

Если вы добавите var start = $ ('. ThisPatient'). Index(); и у вас есть startPosition: начните как один из опций owlCarousel, будет ли он центрировать этот слайд или выровнять его влево? – mikeg542

+0

Не похоже, чтобы карусель фиксировалась при навигации по другим профилям – Lee

+0

[Codepen link] (http://codepen.io/anon/pen/aJoYVa) У меня здесь работает - что-то вроде этой работы для вас? – mikeg542

ответ

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 использует 0-index, как функция index(), начиная с этого числа и центрируя его, делает функцию карусели, как вы стремитесь.