웹 퍼블리싱/제이쿼리 플러그인

(Swiper) 모바일에서 PC 해상도로 바뀔시 에러나는 점

꼬지비 2020. 2. 28. 18:31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var swiper = new Swiper('.swiper-container', {
            slidesPerView: 'auto',
            spaceBetween: 0,
            freeMode: true,
            
            breakpoints: {
                1199: {
                slidesPerView: 1,
              freeMode: false,    
             }
            },
            on:{
                transitionEnd:function(){
                    var matrixX = $('.swiper-wrapper').css('transform').replace(/[^0-9\-.,]/g, '').split(',')[4];
                    //숫자 제외한 문자는 없애준 뒤 콤마를 기점으로 분할
                    //transform X 위치 가져옴
 
                    var overLeng = (2400 - (window.innerWidth))* -1;
                    //전체 슬라이드 넓이에서 브라우저 넓이를 뺌
 
                    if(matrixX < overLeng && $(window).width() > 1199){
                        swiper.setTranslate(overLeng);
                        //setTranslate >> Set custom css3 transform's translate value for swiper wrapper
                    }
                }
            }
        });
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 

 

PC 일때 freeMode: true,

모바일 일때 freeMode: false 

로 지정했더니 PC해상도로 변할 때 넓이를 잘 잡아주지 못 했을 때 해결방법