갤러리최신글 슬라이드형태 jcarousel_basic 정보
최신글 갤러리최신글 슬라이드형태 jcarousel_basic관련링크
첨부파일
본문
갤러리최신글 슬라이드형태 jcarousel_basic 제이쿼리활용한 사례입니다.
추천
2
2
댓글 전체
제이카우셀이네요 감사합니다
이스킨을 사용시 js파일에서 오토(자동스크롤을 설정시)
$('.jcarousel')
.jcarouselAutoscroll ({
interval: 3000,
target: '+=1',
autostart: true
});
추가로 넣어주시고 3000; = 3초닌깐 잘 조절해서 쓰시면 더욱더 도움될거 같습니다
이스킨을 사용시 js파일에서 오토(자동스크롤을 설정시)
$('.jcarousel')
.jcarouselAutoscroll ({
interval: 3000,
target: '+=1',
autostart: true
});
추가로 넣어주시고 3000; = 3초닌깐 잘 조절해서 쓰시면 더욱더 도움될거 같습니다
자동으로 움직이다가 마지막에 멈추는데 다시 1번부터 돌게할 수 있는 방법없을까요 ㅜㅜ
restart 주어야되나.. 계속 돌텐데요;
돼지코구뇽님 이거 저도 박가님처럼 5에서 멈추는데요
다시 1로 갈려면 어떻게 해야되나요?
다시 1로 갈려면 어떻게 해야되나요?
$('.jcarousel').on('jcarousel:reload', function(event, carousel) {
// "this" refers to the root element
// "carousel" is the jCarousel instance
});
카우셀이 끝나면 다시 로드
// "this" refers to the root element
// "carousel" is the jCarousel instance
});
카우셀이 끝나면 다시 로드
돼지코구뇽님.. 작성해주신 내용을 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);
위와 같이 적용했는데 제대로 한건가요?.....
한번은 오토 롤링이 되는데 다시 처음 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);
위와 같이 적용했는데 제대로 한건가요?.....
깔끔하네요 !! 감사해요
사용법 알고 싶어요. 슬라이드는 어떻게 최신글 넣어야해요?
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);
(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);
감사합니다.
감사감사합니다
감사합니다~
