에티테마

에티비즈니스테마 안녕하세요 소프트존님 미디어쿼리 관련하여 질문드립니다.

페이지 정보

작성자 no_profile 마오마오 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 2건 조회 528회 작성일 21-02-01 15:38

본문

안녕하세요 소프트존님 스와이퍼로 메인슬라이더를 직접 구현해 보려고 하는데요 2가지 문제점이 있습니다.

현재 css와 js입니다.

js

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', // 이번 버튼 클래스명
    },
});

 

css

.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%;
    }
}

 

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


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

 

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

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

소프트존님의 댓글

소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일

넵 해당내용은 슬라이드 만으로 해결이 안되고요~
모바일인 경우 css 를 직접 수정해서 작업해야 합니다.~~
미디어쿼리로 일단 작업후 안되시는것 또 문의주세요~

마오마오님의 댓글의 댓글

no_profile 마오마오 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일

헉 이유는 모르겠으나 이미지를 background로 넣는거랑 img로 넣는거랑 차이가 있네요 img로 바꾸니 해결되었습니다..

Total 245건 1 페이지
질문답변 목록
번호 제목 글쓴이 조회 날짜
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3823 03-20
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 5279 02-18
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 6518 12-17
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 9186 12-09
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 16914 08-22
공지 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12470 03-19
239 no_profile 노다 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 24 02-27
238 no_profile yjh 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 29 02-27
237 no_profile rre 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 220 02-18
236 no_profile 톨릭 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 253 02-16
235 no_profile 랩퍼투혼 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 259 02-15
234 no_profile heeju 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 452 02-09
233 no_profile rre 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 498 02-09
232 no_profile heeju 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 475 02-05
231 no_profile 리화 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 589 02-05
230 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 527 02-05
229 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 503 02-05
228 no_profile heeju 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 484 02-04
227 no_profile heeju 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 570 02-01
열람중 no_profile 마오마오 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 529 02-01
225 no_profile REAL 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 550 01-28
224 no_profile REAL 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 498 01-28
223 no_profile 포드 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 621 01-25
222 no_profile 마오마오 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 793 01-15
221 no_profile 조아 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 779 01-14
220 no_profile 여우비누 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 876 01-12
219 no_profile 포드 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1129 01-07
218 no_profile yes 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1095 01-07
217 no_profile 마오마오 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1062 01-07
216 no_profile 포드 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 946 01-06
게시물 검색

카테고리

카테고리
질문답변
 팁게시판
 영카트팁
 라이브러리

프리미엄

프리미엄

영화예고편

영화예고편

최근이미지리스트

최근이미지리스트