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로 잡으시면됩니다
답변을 작성하려면 로그인이 필요합니다.