bxslider 사용시 슬라이드마다 표시 시간을 다르게 주고 싶은데...^^
본문
bxslider 사용하면서
db로부터 이미지 정보를 읽어
루프를 돌릴 때
그 슬라이드의 표시 시간을 각각 줄 수 있는
방법이 있을까요?...
표시시간이 모두 동일하지 않게 하는 게
있었으면 해서 문의 드립니다...^^
감사합니다.
답변 4
방법은 무궁무진 합니다~
그중에 간단한걸로 말씀드리면
옵션에서 speed 부분을 최대시간으로 해주시고
onSlideAfter: function(){
// 해당 슬라이드 등장 애니메이션 완료 후 시점
// 여기서부터 대기시간이 카운트 됩니다.
}
슬라이드 애니메이션이 완료된 시점에서
setTime() 이라던가 제이쿼리 delay() 관련 함수로
slider.goToNextSlide(); 를 호출해주시면됩니다.
요약.
각 슬라이드간 대기시간을 길게 잡은뒤
슬라이드 로드 완료시 개별적으로
slider.goToNextSlide(); // 다음 슬라이드로 진행
을 호출한다.
참조 : https://bxslider.com/options/
옵션 참고해보시면
만약 완성된 소스만 찾으시는 거라면
의뢰로 가시는게 좋을듯 합니다.
SIR 메인 페이지 소스 보기 하면은
대락 401번째줄 쯤에
var slideTimes = ["10","10","10"],
라고 되어 있는 코드가 있습니다.
bxSlider 옵션에
var slideTimes = ["10","10","10"];
var slider = $(셀렉터).bxSlider({
pause : slideTimes[0] * 1000,
onSlideAfter : function(el, old, current){
slider.stopAuto();
slider.pause = (slideTimes[current] * 1000) || 5000;
}
});
이렇게 옵션 주시면 됩니다.
성심으로 주신 답변 잘 보았습니다.
그런데, 제가 잘 이해를 못하겠는 건, .dealy() 와 .goToNextSlide() 를
어디서 써 주어야 하는지 입니다.
그러니까 .dealy()에는 db select 로 얻은 현재 레코드의 displaysecond라는 필드를
넣어주고, 그만큼 정지했다가 .goToNextSlide()를 호출해야 합니다만,
이 문장들을 DB select 루프의 어디다 써 주어야 할지 모르겠습니다.
우선 생각이 닿는대로 나름 구현을 시도해 보지만 번번히 슬라이드 애니메이션이
이상해질 따름이네요...^^
일단 한번은 동일한 시간으로 애니메이션이 완성되도록 하고, 다음부터 슬라이드마다
시간을 주라는 것인지, 어떤 건지 엄청 헤매고 있습니다...ㅜㅜ
번거로시더라도 그 흐름을 간단하게 라도 적어 주시면 큰 힌트가 될 듯 합니다...^^
감사합니다..^^
https://stackoverflow.com/questions/40897482/bxslider-set-different-side-pause-length-hangs-on-page
위의 글이 도움이 될듯 합니다.
