반응형 갤러리 최신글을 만드려고 합니다

반응형 갤러리 최신글을 만드려고 합니다

QA

반응형 갤러리 최신글을 만드려고 합니다

본문

https://sir.kr/g5_skin/9338?sca=%EC%B5%9C%EC%8B%A0%EA%B8%80&page=19

현재 이 스킨을 적용 중이며

3421627295_1559655572.208.png

 

이상태에서 반응형으로 페이지 크기가 줄어들때마다 이미지가 높이와 폭을 어느정도는 유지 하면서 줄어 들어야 되는데 너무 확 줄어 들다가 갑자기 하나로 나오네요;;;이런 값들은 어디서 어떻게 조절 해야 하나요? 크기가 어느 정도 유지 하면서 천천히 줄어들다가 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로 잡으시면됩니다

답변을 작성하시기 전에 로그인 해주세요.
전체 448
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT