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해상도로 변할 때 넓이를 잘 잡아주지 못 했을 때 해결방법
'웹 퍼블리싱 > 제이쿼리 플러그인' 카테고리의 다른 글
(Slick) 슬라이드 후 이벤트 지정 (2) | 2020.03.02 |
---|---|
(Slick) 슬릭 잘 먹히지 않을 때 해결방법 (0) | 2020.03.02 |
(Masonry) Masonry 사용하기 (0) | 2020.01.19 |
(Swiper) swiper.slideTo(num) (0) | 2020.01.19 |
(Swiper) swiper.update (0) | 2020.01.19 |