Meteor swiper slider taking time to load images and videos? - meteor

Question

I am using swiper slider in meteor but it's taking too much time to load images and videos in slider on the home page. On my home page posts are coming and each posts videos and images are coming in the slider. But after taking too much time to load it crash the page. This is code to show posts videos and images in swiper slider.
{{#if imagesArguments}}
<div class="argu-scroller" id="argumentImages" style="border:1px solid #d4d6d8; margin-top:10px;" data-userProfile="{{getImage plaintiff._id}}">
<div class="swiper-wrapper">
{{#if meta.thumbnail_url}}
<div class="swiper-slide swiper-card">
<div class="evidencecard">
<div class="evidencecard-inside">
<header>
<a href="{{plaintiff_bitlyurl.url}}" target="_blank">
<img src="{{meta.thumbnail_url}}" />
<div class="text-wrap">
<h2>{{meta.title}}</h2>
</div>
</a>
</header>
<main>
<div class="info-wrap">
<h5>{{plaintiff_bitlyurl.url}}</h5>
<!--<p>{{evidenceFull plaintiff_evidence}}</p>-->
<p>{{meta.description}}</p>
</div>
</main>
</div>
</div>
</div>
{{/if}}
{{#each imagesArguments}}
<div class="swiper-slide swiper-image">
<div class="argumentimageshome argument2 tem-miniargument">
<a data-toggle="modal" data-target="#imageZoomview" class="imgZoom" data-id="{{this}}" >
<img class="img-thumbnail" src="{{this}}" />
</a>
</div>
</div>
{{/each}}
{{#each videoArguments}}
<div class="swiper-slide swiper-video">
<div class="argumentvideoshome">
<div class="video">
<video height="150" controls>
<source src="{{this}}" type="video/mp4">
</video>
</div>
</div>
</div>
{{/each}}
</div>
</div>
{{/if}}
code to call slider in js file
Template.miniArgument.onRendered(function(){
var swiper = new Swiper('.argu-scroller', {
slidesPerView: 3,
spaceBetween: 30,
slidesPerGroup: 3,
loop: true,
loopFillGroupWithBlank: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});

Answer 1

I think this is not related to Meteor. Did you try to use the virtualization component in the Swiper? You would need to lazy-load extra slides. If not too many, you can preload all of them with the ones in view being prioritized. If you have many, you need to make use of the lazy load. Check this discussion: https://github.com/nolimits4web/swiper/issues/1279 . In your Network tab in Chrome developer tools, do you see a lot of MBs being downloaded? If you have huge assets ... it will indeed take time.