swiper 메인슬라이드 질문드립니다.

swiper 메인슬라이드 질문드립니다.

QA

swiper 메인슬라이드 질문드립니다.

본문

현재 css와 js입니다.

css

new Swiper( '.swiper-container', {
    effect : 'fade', // 페이드 효과 사용
    loop : true, // 무한 반복
    speed : 1000, // 슬라이드 속도 1초
    pagination : { // 페이징 설정
        el : '.swiper-pagination',
        clickable : true, // 페이징을 클릭하면 해당 영역으로 이동, 필요시 지정해 줘야 기능 작동
    },
     autoplay: {
            delay: 4000,
            loop : true, // 무한 반복
    },
    navigation : { // 네비게이션 설정
        nextEl : '.swiper-button-next', // 다음 버튼 클래스명
        prevEl : '.swiper-button-prev', // 이번 버튼 클래스명
    },
});

 

js

.swiper-container {
    width:100%;
    height:85vh;
}
.swiper-slide {
    overflow:hidden;
    text-align:center;
    display:flex; /* 내용을 중앙정렬 하기위해 flex 사용 */
    align-items:center; /* 위아래 기준 중앙정렬 */
    justify-content:center; /* 좌우 기준 중앙정렬 */
    background-color:#fff;
    border:;
    border-radius:;
    box-shadow:;
    box-sizing:border-box; /* 이 설정을 하지 않으면 슬라이드드가 틀어짐 */
    /* 아래에 있는 실행가능한 소스를 가지고 실험해 보세요 */
    display:block;
    width:auto;
}

@media (max-width:768px){
    .swiper-container {
    width:100%;
    }
}

 

3696704611_1612106396.3041.png

pc화면인데 100%이하로 줄였을때 해당화면과 같이 바둑판 형식으로 이미지가 추가됩니다.

 

3696704611_1612106435.6945.png

모바일 화면인데 화면그대로 축소되지 않고 일정부분 잘려서 나옵니다. 

 

이부분을 해결할수 있는방법을 자세히 알려주시면 정말감사합니다.

 

이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

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