중앙의 Cycle2 회전식 활성 슬라이드
사라
이 데모와 같은 방식으로 회전식 호출기와 함께 Cycle2를 사용하고 있습니다. http://jquery.malsup.com/cycle2/demo/caro-pager.php
현재 데모의 활성 슬라이드는 마지막 몇 개의 슬라이드에 있지 않는 한 왼쪽에 있습니다. 내가 원하는 것은 :
- 활성 슬라이드가 왼쪽에서 시작하도록 슬라이드 1
- 그런 다음 슬라이드 2를 클릭하면 축소판은 이동하지 않지만 두 번째 축소판은 활성으로 표시됩니다.
- 슬라이드 3을 클릭하면 축소판은 이동하지 않지만 세 번째 축소판 (가운데)이 활성화됩니다.
- 슬라이드 4를 클릭하면 모든 축소판이 왼쪽으로 이동하고 네 번째 축소판 (현재 가운데)이 활성화됩니다.
- 슬라이드 5, 6, 7의 경우 위와 동일합니다.
- 슬라이드 8을 클릭하면 축소판은 이동하지 않지만 여덟 번째 축소판은 활성화됩니다 (이제 오른쪽에서 두 번째).
- 슬라이드 9를 클릭하면 축소판은 이동하지 않지만 아홉 번째 축소판은 활성화됩니다 (오른쪽의 마지막 축소판).
다이어그램 참조 :
: 나는 여기 jsfiddle에 대한 데모를 복사 한 http://jsfiddle.net/Qhp2g/1/ 하지만 어디서부터 시작 아니에요로서 내가 사용 시도 약간의 도움을 주셔서 감사합니다 정말 것이다 (!) data-cycle-carousel-offset="40%"에 #cycle-2이 사용자가 함께 노력으로 저에게 비슷한 문제가 있습니다. Cycle2 : 메인 슬라이드 쇼 아래의 중앙 회전식 활성 슬라이드 이며 마지막 슬라이드에 액세스 할 수없고 처음에 왼쪽에 공간이 있기 때문에 작동하지 않습니다.
내 필요에 따라 플러그인 캐 러셀 스크립트 ( http://malsup.github.io/jquery.cycle2.carousel.js) 를 변경해야 할 수도 있다고 가정 하지만 어디서부터 시작해야할지 확실하지 않습니다! 도움을 주셔서 감사합니다.
Bryan
해야 할 일은 jquery.cycle2.carousel.js 파일을 편집하고 전환 기능을 변경하는 것입니다. 오프셋을 하드 코딩했지만 원하는 경우 제공하는 백분율을 기반으로 코딩 할 수 있습니다.
주요 변경 사항은 다음과 같습니다.
var offset = 2; //Set the offset of your carousel, for 5 it will be 2.
//Use this offset to calculate the max and min slide locations.
var maxCurr = opts.slideCount - (opts.carouselVisible - offset);
var minCurr = opts.slideCount - (opts.carouselVisible + offset);
...
//Add the following conditions to account for the new minCurr
else if (hops > 0 && opts.nextSlide <= minCurr){
hops = 0;
}
else if (hops < 0 && opts.currSlide <= minCurr){
hops = 0;
}
else if (hops > 0 && opts.currSlide < minCurr && opts.nextSlide > minCurr){
hops = opts.nextSlide - minCurr;
}
else if (hops < 0 && opts.nextSlide < minCurr){
hops = opts.nextSlide - minCurr;
}
여기에서 작동하는 바이올린을 참조하십시오 : http://jsfiddle.net/m66tS/10/
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
jQuery Cycle2 슬라이더-숫자 호출기 활성 슬라이드의 속성을 변경하는 방법
- 2
이미지 슬라이드 쇼 위의 텍스트-jQuery Cycle2
- 3
첫 번째 슬라이드와 마지막 슬라이드 사이의 슬라이드에 대해 회전식 아이콘 비활성화 및 활성화가 작동하지 않음-Bootstrap
- 4
Safari에서만 손상된 HTML 슬라이드 내의 JQuery Cycle2 플러그인 레이아웃
- 5
Wordpress Expert. 슬라이더 회전 슬라이드의 연락처 양식
- 6
Cycle2에서 슬라이드 변경시 CSS 변경
- 7
확대 / 축소 효과가있는 jquery 활성 (중앙) 슬라이드
- 8
2 개의 다른 슬라이드를 사용할 때 슬라이드 전환 구성 요소가 작동하지 않습니다.
- 9
Apple Watch의 HTML 슬라이드 쇼 또는 회전식 스타일
- 10
프로그래밍 방식으로 jQuery cycle2 점진적로드
- 11
모션 중 스프라이트 회전 비활성화
- 12
jQuery Cycle2에서 다음 슬라이드를 대상으로 지정
- 13
Cycle2 Carousel-이상한 동작
- 14
jQuery 슬라이더 슬라이드의 기본 회색 배경
- 15
slick.js에서 3 개의 슬라이드를 보여주는 가운데 활성 슬라이드
- 16
어떻게 회전 목마의 첫 번째와 마지막 슬라이드 사이의 원활한 전환을 추가?
- 17
jQuery Cycle 2 슬라이더를 중앙에 어떻게 배치합니까?
- 18
Jquery Fullpage-중간 슬라이드로 스크롤 비활성화
- 19
Swiper.js를 사용하여 슬라이드의 이전 활성 인덱스를 얻으려면 어떻게합니까?
- 20
앵커에서만 슬라이드를 변경하는 jQuery -Cycle2 플러그인
- 21
중앙 요소를 중심으로 숫자의 1D 벡터를 회전하여 2D 이미지를 만드는 방법은 무엇입니까?
- 22
탭 이벤트 중 Flutter 회전식 이미지 슬라이더가 별도의 페이지를 엽니 다.
- 23
Angular의 슬라이드 쇼 CSS 전환
- 24
Shopify의 사용자 지정 테마 용 회전식 슬라이더
- 25
여러 jQuery Cycle 2 슬라이드 쇼에 대한 동기화 전환
- 26
JQuery 슬라이더 : 비활성 슬라이드 페이드
- 27
브라우저를 새로 고칠 때마다 이미지를 중앙에 배치하는 슬라이드 쇼 플러그인의 기능을 비활성화 하시겠습니까?
- 28
재부팅하지 않고 Windows 10 장치에서 프로그래밍 방식으로 관리 센터의 회전 잠금을 활성화 / 비활성화 (회색으로 표시)하는 방법이 있습니까?
- 29
jQuery를 회전식 슬라이드 애니메이션
몇 마디 만하겠습니다