반응형 갤러리 최신글을 만드려고 합니다
본문
https://sir.kr/g5_skin/9338?sca=%EC%B5%9C%EC%8B%A0%EA%B8%80&page=19
현재 이 스킨을 적용 중이며
이상태에서 반응형으로 페이지 크기가 줄어들때마다 이미지가 높이와 폭을 어느정도는 유지 하면서 줄어 들어야 되는데 너무 확 줄어 들다가 갑자기 하나로 나오네요;;;이런 값들은 어디서 어떻게 조절 해야 하나요? 크기가 어느 정도 유지 하면서 천천히 줄어들다가 2개를 거쳐서 제일 작은 화면일때 1개가 나오게 하고 싶습니다
(function($) {
$(function() {
var jcarousel = $('.jcarousel');
jcarousel
.on('jcarousel:reload jcarousel:create', function () {
var carousel = $(this),
width = carousel.innerWidth();
if (width >= 600) {
width = width / 3;
} else if (width >= 350) {
width = width / 2;
}
carousel.jcarousel('items').css('width', Math.ceil(width) + 'px');
})
.jcarousel({
wrap: 'circular'
});
$('.prev')
.jcarouselControl({
target: '-=1'
});
$('.next')
.jcarouselControl({
target: '+=1'
});
$('.jcarousel-pagination')
.on('jcarouselpagination:active', 'a', function() {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function() {
$(this).removeClass('active');
})
.on('click', function(e) {
e.preventDefault();
})
.jcarouselPagination({
perPage: 1,
item: function(page) {
return '<a href="#' + page + '">' + page + '</a>';
}
});
});
})(jQuery);
답변 2
if (width >= 600) {
width = width / 3;
} else if (width >= 350) {
width = width / 2;
}
이 부분이 폭 해상도별 개수를 조정하는겁니다.
600, 350 수치를 수정하면서 해보세요.
그외 높이나 모양은 css 에서 수정해줘야 합니다.
해당 스크립트는 분배넓이이고 그냥 css만으로 처리를 하는게 좋을듯하네요
맨하단 페이징을 제외하고 삭제후 css로 잡으시면됩니다