스와이퍼 반응형 340 오류 ㅜㅜ

스와이퍼 반응형 340 오류 ㅜㅜ

QA

스와이퍼 반응형 340 오류 ㅜㅜ

답변 2

본문

미디어쿼리를 1279, 767 에서 총 두번을 잡아서 반응형을 만들고 있는데요

스와이퍼부분 340에선 이미지 하나만 센터 정렬로 나오도록 하고 싶은데.... 

swiper-wrapper너비, 이미지 너비를 건드리면 원하는대로 안나옵니다ㅠㅠ

어떻게 해야할지 도움 부탁드려요 ㅜㅜㅜㅜ 

1. 아래 코드에서 어떤 부분을 건드려야 340 사이즈에서 센터로 이미지 하나만 나올수 있을까요?

2. 그리고 1920에도 새로고침을 할때마다 자꾸 스와이퍼 모양이 다르게 나오다가 또 제대로 나오고 그러는데... (어떨때는 밀려 보임) 어떻게 수정을 해야할까요?

 

2039303341_1703736527.5161.png2039303341_1703736531.5644.png

 

이 질문에 댓글 쓰기 :

답변 2

--;;; 관련 소스 css 도 다 보여주셔야 지요;;;

일단 정리 해드리죠

340에서 하나만 센터정열 하고 .

다음 1920에서 왓다리뒷다리 안정적으로...처리

 

<script>
    var swiper = new Swiper('.mySwiper', {
        slidesPerView: 1,
        loop: true,
        initialSlide: 1,
        centeredSlides: true,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.swiper-button-n',
            prevEl: '.swiper-button-p',
        },
        breakpoints: {
            340: {
                slidesPerView: 1,
                centeredSlides: true,
            },
            768: {
                slidesPerView: 2,
            },
            1279: {
                slidesPerView: 2,
            },
            1920: {
                slidesPerView: 3,
            }
        }
    });
</script>

css 미디어쿼리로 처리는 잘안되나요?

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 364
© SIRSOFT
현재 페이지 제일 처음으로