매끄러운 슬라이더 점 재배치 - 복수 위치

Question

매끄러운 슬라이더 (http://kenwheeler.github.io/slick/)를 사용하고 있습니다. 나는 특정 매끄러운 슬라이더에 대해서만 매끄러운 점의 위치를 ​​재조정 할 수 있는지 궁금해했다. ("슬라이더"는 슬라이더의 이미지가 아니라 전체 슬라이더를 의미한다.) 내 페이지에는 매끄러운 3 개의 슬라이드가 있고, 그들 중 하나).

는이 게시물 slick slider dots repositioning 다시 위치를 발견하고 허용 솔루션은 당신이 (모두 함께 슬라이더에 대한) 모든 점을 이동하려는으로 잘 작동 :

.slick-dots { 
 
    top: 100px; // play with the number of pixels to position it as you want 
 
    left: 100px; // play with the number of pixels to position it as you want 
 
}

어떻게 특정 슬라이더에 대해서만 점의 위치를 ​​변경 하시겠습니까? .slick-dots 클래스는 모든 슬라이더에 적용되는 것으로 보이며 소스 코드는 CDN에 있습니다.

코드 참조 용으로는 https://jsfiddle.net/5ox31m2a/89/을 참조하십시오 (이는 한 손에 슬라이더의 예일 뿐이며이 문제의 전체적인 표현은 아닙니다). 사전에

덕분에 모든

Answer 1

먼저 플러그인의 최신 버전을 사용해야합니다, 현재 버전은 1.8.1

는 그런 다음에 별개의 속성을 설정합니다 afterChange 이벤트를 사용할 수있다 CSS를 사용하여 스타일을 지정할 수 있습니다. 예를 들어

,

$('.slider').on('afterChange',function(e, slick, currentSlide){ 
    slick.$dots.attr('data-current-slide', currentSlide); 
}); 

상기 현재 슬라이드 일치하는 값 data-current-slide라는 속성을 설정한다. 이제 스타일링을 위해 CSS로 [data-current-slide="XX"]으로 타겟팅 할 수 있습니다. 현재 슬라이드 당신이 slidesToScroll 옵션

참조를 사용하는 방법에 따라 달라집니다 : 당신은 슬라이드에 3
참고 때 사진 아래의 점을 이동합니다

.slick-dots[data-current-slide="3"]{ 
    bottom: -20px; 
} 

를 사용하여 예를 들어

데모 : https://jsfiddle.net/gaby/1hoztaay/