제이쿼리 질문
본문
초보 퍼블리셔입니다.
스와이퍼 슬라이드를 구현하는데 해상도1024px이상 화면에서 슬라이드카드 5개를 보여주고
1024이하에서 3개를 보여주고 싶은데 resize했을때 slidesPerView: 5 이부분을 어떻게 바꿔야 하나요 ??
빨간부분 어떻게 입력해하는지 궁급합니다.
좀 허접한 질문이지만 ,, 고수님들 도움 부탁드립니다..!
$(document).ready(function() {
// Assign some jquery elements we'll need
var $swiper = $(".swiper-container");
var $bottomSlide = null; // Slide whose content gets 'extracted' and placed
// into a fixed position for animation purposes
var $bottomSlideContent = null; // Slide content that gets passed between the
// panning slide stack and the position 'behind'
// the stack, needed for correct animation style
var mySwiper = new Swiper(".swiper-container", {
spaceBetween: 20,
slidesPerView: 5,
centeredSlides: true,
roundLengths: true,
loop: true,
loopAdditionalSlides: 30,
navigation: {
nextEl: ".btn.slide_next",
prevEl: ".btn.slide_prev"
}
});
$(window).resize(function(){
var width = window.innerWidth;
if(width < 1024){
여기에 어떻게 들어가야하나요?
}
else {여기에 어떻게 들어가야하나요?}
}).resize();
});
답변 1
스와이퍼 옵션 자체에 반응형 대응이 포함되어 있습니다.
https://github.com/nolimits4web/Swiper/blob/master/demos/380-responsive-breakpoints.html
var mySwiper = new Swiper(".swiper-container", {
spaceBetween: 20,
slidesPerView: 5,
centeredSlides: true,
roundLengths: true,
loop: true,
loopAdditionalSlides: 30,
navigation: {
nextEl: ".btn.slide_next",
prevEl: ".btn.slide_prev"
}
breakpoints: {
1024: {
slidesPerView: 3,
},
}
});
위 코드와 같이 제어하시면 됩니다.
해결되었습니다 정말 감사합니다 :)
