애니빌드.LAB
토론방
소스관련 이미지 슬라이드 문의건.
- m**eongmundc
- 2019-04-09 16:27:00
- hit4064
- http://lab.anybuild.co.kr/bbs/qna/7184
이미지 슬라이드 4장이 돌아갈때 방향 버튼을 클릭할시 왼쪽,오른쪽으로 넘어가는데, 이미지슬라이드4장에 대한 각각 제목 누르면 해당 이미지 슬라이드가 보이는 식으로 소스 수정될까요?

게시글 공유
URL복사
댓글작성
열기 닫기
열기 닫기
슬라이드 수정 완료되었습니다. 수정된 JS는 아래를 참고해주세요.
[수정 전]
jQuery(function($) {
$('#owl_img__51962__').owlCarousel({
margin: 0, // 이미지 간격
loop: true, // 무한 반복
center: false, // 액티브 슬라이드 가운데 정렬
mouseDrag: true, // 마우스 드레그 사용
touchDrag: true, // 터치 드레그 사용
stagePadding: 0, // 스테이지 여백 (좌우 슬라이드 노출)
nav: {$farm_set[nav]}, // 방향 네비게이션
dots: {$farm_set[dots]}, // 하단 네비게이션
dotsEach: false, // 하단 네비게이션 (페이지별 출력,항목별 출력)
autoplay: true, // 자동 재생
autoplayTimeout: 5000, // 자동 재생 속도
smartSpeed: 250, // 슬라이드 속도
responsiveRefreshRate: 0, // 반응형 체크 시간
startPosition: 0, // 시작 슬라이드 번호
URLhashListener: false, // #URL 로 액티브 슬라이드 동작
autoplayHoverPause: false, // 마우스 오버시 일시정지
responsiveClass: false, // 반응형 class명 사용 (owl-reponsive-0)
navContainer: false, // 방향 네비게이션 커스터마이징
dotsContainer: '#owl_btn__51962__', // 하단 네비게이션 커스터마이징
items:1, // 한 화면 출력수
slideBy:1, // 한번에 슬라이드 되는 수
animateOut: '{$farm_set[animateOut]}' // 슬라이드(''), 페이드(fadeOut)
})
changeImg();
$(window).on('resize',function(){
changeImg();
});
});
function changeImg(){
if(Modernizr.mq('only all and (max-width:102*px)**;)==true){
$('#owl__51962__').find('.main_img').each(function(){
$(this).attr('src',$(this).attr('data-src-m'));
});
}else{
$('#owl__51962__').find('.main_img').each(function(){
$(this).attr('src',$(this).attr('data-src'));
});
}
}
수정 후
jQuery(function($) {
var
$owl_slide_img = $('#owl_img__51962__'),
$owl_slide_thumb = $('#owl_btn__51962__'),
duration = 250
;
$owl_slide_img.owlCarousel({
margin: 0, // 이미지 간격
loop: true, // 무한 반복
center: false, // 액티브 슬라이드 가운데 정렬
mouseDrag: true, // 마우스 드레그 사용
touchDrag: true, // 터치 드레그 사용
stagePadding: 0, // 스테이지 여백 (좌우 슬라이드 노출)
nav: {$farm_set[nav]}, // 방향 네비게이션
dots: {$farm_set[dots]}, // 하단 네비게이션
dotsEach: false, // 하단 네비게이션 (페이지별 출력,항목별 출력)
autoplay: true, // 자동 재생
autoplayTimeout: 5000, // 자동 재생 속도
smartSpeed: duration, // 슬라이드 속도
responsiveRefreshRate: 0, // 반응형 체크 시간
startPosition: 0, // 시작 슬라이드 번호
URLhashListener: false, // #URL 로 액티브 슬라이드 동작
autoplayHoverPause: false, // 마우스 오버시 일시정지
responsiveClass: false, // 반응형 class명 사용 (owl-reponsive-0)
navContainer: false, // 방향 네비게이션 커스터마이징
dotsContainer: '#owl_btn__51962__', // 하단 네비게이션 커스터마이징
items:1, // 한 화면 출력수
slideBy:1, // 한번에 슬라이드 되는 수
animateOut: '{$farm_set[animateOut]}' // 슬라이드(''), 페이드(fadeOut)
})
changeImg();
$(window).on('resize',function(){
changeImg();
});
$owl_slide_thumb.find('.item').each(function(){
$(this).on('click',function(e){
e.preventDefault();
var this_index = $(this).index();
$owl_slide_img.trigger('to.owl.carousel', [this_index, duration, true]);
})
});
});
function changeImg(){
if(Modernizr.mq('only all and (max-width:102*px)**;)==true){
$('#owl__51962__').find('.main_img').each(function(){
$(this).attr('src',$(this).attr('data-src-m'));
});
}else{
$('#owl__51962__').find('.main_img').each(function(){
$(this).attr('src',$(this).attr('data-src'));
});
}
}
그리고 CSS #owl_btn__51962__ .item에 cursor:pointer; 추가되었습니다.