2016-09-28 7 views
0

여러 장소에서 슬라이더를 구현하고 각 페이지를 개별적으로 제어해야하는 경우 한 페이지에서 한 페이지를 두 번 클릭 한 다음 사이트의 다른 곳에서 이상적으로 슬라이더를 구현하고 싶습니다.올빼미 회전 목마 - 여러 슬라이더 다른 컨트롤

한 번에
  • 이동 한 슬라이드
  • 이동 한 번에 3 개 슬라이드
  • 자동 스크롤
나는 매개 변수에이를 정렬하지만, 내가 그들을 그렇게 분리하는 방법을 확실하지 오전하는 방법을 볼 수 있습니다

나는 가지고있다 개별적으로 제어하십시오.

다른 클래스를 html에 추가 한 다음 .js에있는 클래스를 사용하여 식별해야한다고 생각합니다.

어떻게 클래스를 .js에 추가 할 수 있습니까?

나는 그것 여기 추정하고있어 :

f.fn.owlCarousel.options = { 
    items: 5, 
    itemsCustom: !1, 
    itemsDesktop: [1199, 4], 
    itemsDesktopSmall: [979, 3], 
    itemsTablet: [768, 2], 
    itemsTabletSmall: !1, 

여기에이 읽은 :

owl carousel - Set different items number for each of many sliders placed on the same page

하지만 난 owl.carousel로이를 구현하는 방법을 잘 모르겠어요 .min.js 파일은 구조가 약간 다르거 나 클래스를 추가하는 방법/위치가 다릅니다.

참조 : f.fn.owlCarousel.options의 = {사전

던컨

답변

2

에서

덕분에 둘 이상의 장소를 구현할 수 있지만, 당신은 어떤 클래스를 추가하고 싶지 않아요. 다른 ID를 추가하면 다음과 같이 사용할 수 있습니다.

$("#owl-demo1").owlCarousel({ 
    items: 3, 
    itemsDesktop: [1199,3], 
    itemsDesktopSmall: [979,3], 
    itemsMobile: [479,3], 
}); 
$("#owl-demo2").owlCarousel({ 
    items: 5, 
    itemsDesktop: [1199,3], 
    itemsDesktopSmall: [979,3], 
    itemsMobile: [479,3], 
}); 
$("#owl-demo4").owlCarousel({ 
    items: 3, 
    itemsDesktop: [1199,3], 
    itemsDesktopSmall: [979,3], 
    itemsMobile: [479,3], 
}); 
$("#owl-demoupload").owlCarousel({ 
    items: 7, 
    itemsDesktop: [1199,3], 
    itemsDesktopSmall: [979,3], 
    itemsMobile: [479,3], 
}); 
관련 문제