모바일 터치 슬라이더 (v. 4.0.5) Swiper을 사용하고 있습니다. 이미지가로드되기 전에 슬라이더를 초기화하는 것과 관련된 문제로 인해 작동하지 않습니다.스 와이프의 "imagesReady"이벤트가 실행되지 않음
내가 발견 한 유일한 해결책은 지연 후 update()으로 전화하는 것입니다.
setTimeout(function() {
mySwiper.update();
}, 500);
하지만 0.5 초 지연은 싫지만. 이미지가로드 된 후 슬라이더를 다시 초기화해야하는 경우, 이미지가 준비되는 즉시 효율적으로 슬라이더를 이동하는 것이 좋습니다.
설명서에는 updateOnImagesReady 매개 변수가 나열됩니다.이 매개 변수는 true로 설정하면 모든 이미지가로드 된 후 슬라이더를 다시 초기화해야합니다. 하지만 도움이되지 않는 것 같습니다. 활성화 Swiper는 모든 내부 이미지 (태그) 후 다시 초기화됩니다
updateOnImagesReady
이로드됩니다.
이 문서는imagesReady이벤트를 나열 "events"에서
preloadImages: true 필수. 이 이벤트를 사용하여 update()에 전화 할 수 있다고 생각했습니다.
imagesReady
이벤트는 모든 내부 이미지가로드 된 후 바로 해고 될 것입니다.
updateOnImagesReady도 아래에있는 내 코드에서
init 이벤트가 발생하는 것 같다,하지만 난
imagesReady 화재 얻을 수 없습니다.
imagesReady 이벤트가 실행되지 않는 이유는 무엇입니까?
var mySwiper = new Swiper('.swiper-container', {
loop: true,
slidesPerView: 1,
grabCursor: true,
effect: 'fade',
preloadImages: true,
updateOnImagesReady: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function() {
console.log('initialized.'); // this works
},
imagesReady: function() {
console.log('images ready.'); // this doesn't work
}
}
});body {
margin: 0;
}<link href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/F00/fff&text=360w 360w,
//dummyimage.com/450x200/F00/fff&text=450w 450w,
//dummyimage.com/600x200/F00/fff&text=600w 600w,
//dummyimage.com/900x200/F00/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/F00/fff&text=default"
alt="">
</div>
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/0F0/fff&text=360w 360w,
//dummyimage.com/450x200/0F0/fff&text=450w 450w,
//dummyimage.com/600x200/0F0/fff&text=600w 600w,
//dummyimage.com/900x200/0F0/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/0F0/fff&text=default"
alt="">
</div>
<div class="swiper-slide">
<img srcset="//dummyimage.com/360x200/00F/fff&text=360w 360w,
//dummyimage.com/450x200/00F/fff&text=450w 450w,
//dummyimage.com/600x200/00F/fff&text=600w 600w,
//dummyimage.com/900x200/00F/fff&text=900w 900w"
sizes="100vw"
src="//dummyimage.com/360x200/00F/fff&text=default"
alt="">
</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>아마 관련 :
Swiper slider not working unless page is resized
Swiper slider space between not showing on load
iDangero Swiper only work when screen is resized
swiper doesn't work on page load
편집 :
초기화 문제는이 effect:'fade' 매개 변수를 제거하면 멀리 갈 것 같다. slideChangeStart event does not fire when I swipe을 참조하십시오. 하지만 "페이드"효과를 사용하고 싶습니다. 그리고 나는 여전히 사건을 어떻게 일으키는 지 알고 싶다.