스와이퍼 반응형 340 오류 ㅜㅜ
본문
미디어쿼리를 1279, 767 에서 총 두번을 잡아서 반응형을 만들고 있는데요
스와이퍼부분 340에선 이미지 하나만 센터 정렬로 나오도록 하고 싶은데....
swiper-wrapper너비, 이미지 너비를 건드리면 원하는대로 안나옵니다ㅠㅠ
어떻게 해야할지 도움 부탁드려요 ㅜㅜㅜㅜ
1. 아래 코드에서 어떤 부분을 건드려야 340 사이즈에서 센터로 이미지 하나만 나올수 있을까요?
2. 그리고 1920에도 새로고침을 할때마다 자꾸 스와이퍼 모양이 다르게 나오다가 또 제대로 나오고 그러는데... (어떨때는 밀려 보임) 어떻게 수정을 해야할까요?
답변 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 미디어쿼리로 처리는 잘안되나요?
제가 이해를 잘 안되서요
340 미디어쿼리 에서 센터로 이미지 나오게 한다는게 이미지가 백그라운드로 하셨나요?
밑에 css 이미지 말고 텍스트를 보여주심 안될까요? 확대가 잘 안되요 ㅠㅠ
근데 왜 미디어 쿼리 없나요? 340 사이즈로 미디어 쿼리 줘서 쓰시면되는데요
스와이퍼 내부 브레이크 포인트로 안되면 직접 미디어쿼리 만들어서 340 지정하고 중앙 정렬 해보신게 좋구요