[swiper.js] slide effect fade, display:none=>block

https://swiperjs.com/swiper-api

Swiper API

 

 

 

 

1. 스와이프 js fade effect

fade 효과일 때 슬라이드 이미지가 쌓이는 느낌

그림자 이미지가 점점 진하게 드리움

위 현상을 막기 위해 아래 옵션 추가

effect : 'fade', 
fadeEffect: { 
crossFade: true 
},

반응형

2. swiper js display:none 상태에서 작동하지 않을 경우

display none 요소에서 block이 될 때 슬라이드는 작동되지 않는다.

이때 아래 옵션값을 넣어 초기화 해준다.

 

observer: true,  
observeParents: true,