이노비트

갤러리최신글 슬라이드형태 jcarousel_basic

· 2015-12-08 (화) 23:12:27 · 13534 · 12
이미지 2.jpg

갤러리최신글 슬라이드형태 jcarousel_basic 제이쿼리활용한 사례입니다.

첨부파일

이미지 2.jpg (173.6 KB)
0회 2015-12-08 23:12
jcarousel_basic.zip (126.3 KB) 371회 2015-12-08 23:12
|

댓글 12개

2015-12-19 (토) 22:41:21
제이카우셀이네요 감사합니다

이스킨을 사용시 js파일에서 오토(자동스크롤을 설정시)


$('.jcarousel')
.jcarouselAutoscroll ({
interval: 3000,
target: '+=1',
autostart: true
});

추가로 넣어주시고 3000; = 3초닌깐 잘 조절해서 쓰시면 더욱더 도움될거 같습니다
자동으로 움직이다가 마지막에 멈추는데 다시 1번부터 돌게할 수 있는 방법없을까요 ㅜㅜ
2015-12-30 (수) 20:26:17
restart 주어야되나.. 계속 돌텐데요;
2016-03-07 (월) 21:41:06
돼지코구뇽님 이거 저도 박가님처럼 5에서 멈추는데요
다시 1로 갈려면 어떻게 해야되나요?
2016-03-08 (화) 09:00:07
$('.jcarousel').on('jcarousel:reload', function(event, carousel) {
// "this" refers to the root element
// "carousel" is the jCarousel instance
});

카우셀이 끝나면 다시 로드
2016-03-22 (화) 11:27:52
돼지코구뇽님.. 작성해주신 내용을 jcarousel.basic.js 파일에 추가하였는데
한번은 오토 롤링이 되는데 다시 처음 1번으로 가지를 않습니다.
혹시 제가 돼지코구뇽님이 작성해주신 소스를 잘못 적용한건지..

$('.jcarousel').jcarouselAutoscroll({
interval: 5000
});


$('.jcarousel').jcarouselAutoscroll({
target: '+=4'
});

$('.jcarousel').on('jcarousel:reload', function(event, carousel){
// "this" refers to the root element
// "carousel" is the jCarousel instance
});


});

})(jQuery);


위와 같이 적용했는데 제대로 한건가요?.....
깔끔하네요 !! 감사해요
사용법 알고 싶어요. 슬라이드는 어떻게 최신글 넣어야해요?
2016-06-21 (화) 14:25:25
js 파일을 아래와 같이 바꾸시면.... 계속 돕니다...

(function($) {
$(function() {
$('.jcarousel').jcarousel();

$('.jcarousel-control-prev')
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.jcarouselControl({
target: '-=1'
});

$('.jcarousel-control-next')
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
})
.jcarouselControl({
target: '+=1'
});

$('.jcarousel-pagination')
.on('jcarouselpagination:active', 'a', function() {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function() {
$(this).removeClass('active');
})
.jcarouselPagination();

$('.jcarousel')
.jcarousel({
wrap: 'circular'
})
.jcarouselAutoscroll({
target: '+=1',
interval: 3000
});

});
})(jQuery);
감사합니다.
2018-03-16 (금) 10:43:38
감사감사합니다
감사합니다~
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 스킨

2,750건

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

+