I'm a newbie on VueJS and I'd like to know if it's feasible to create a carousel of images by using Swiper Vue.js Component with both the features infinite loop and lazy loading.
Thanks
With the plain JS, it works simply by initializing the Swiper carousel with the lazy load and infinite loop parameters set, as I did here https://jsfiddle.net/e2a41g5n/3/
Related
I'm looking for an horizontal swiper/carousel plugin/solution for react native with dynamic content height and infinite loop. Some plugin tried:
Can't handle auto-height
https://github.com/reactrondev/react-native-web-swiper/issues/17
https://github.com/dohooo/react-native-reanimated-carousel/issues/88
https://github.com/callstack/react-native-pager-view/issues/532
No infinite loop
https://github.com/gusgard/react-native-swiper-flatlist/issues/29
https://github.com/callstack/react-native-pager-view/issues/539
Not Maintained anymore:
https://github.com/phil-r/react-native-looped-carousel
https://github.com/archriss/react-native-snap-carousel
https://github.com/nick/react-native-carousel
Does anyone find a working plugin or solution to achieve this kind of component?
How to use multiple swiper animation in one page please how do we do it without over writing the existing animation
I am currently using Swiper 5.3.7. Everything works fine except the Lazy Loading.
I am using a separate Lazysizes for Lazy Loading images in the site.
And I am aware that Swiper slider provides Lazy Loading only for images that are inside the slider(Active/Inactive slides).
When I am using Lazysizes with Swiper's Lazy Load, Lazy Load works perfect until I reach the viewport. Once I am in the viewport, it loads all the images of the slides irrespective of the active/inactive state(which means Swiper's lazy loading is not working when combined with Lazysizes).
Expected Outcome:
Swiper Lazy Load should be enabled when the page reaches the viewport. Till then Lazysizes will control the images loading.
I am trying to animate multiple items at once like this which is a date picker but I am trying to achieve the animation like that using transition-group in Vue.js but it is not working. I created this snippet to demonstrate my problem https://codepen.io/nicholasnet/pen/ZMyvRd
Is there anyway to resolve this issue without generating any extra data than whats being rendered in VueJS?
A am developing a list based app, wherein I am tryin to use iScroll5 to implement lot of animations and smooth scrolling functions. I would like to do lazy loading of my contents wherein I want to load first 50 list elements to DOM and based on user scroll event asynchronously bind the next set of list elements to the DOM.
Am I on the right track to go with the iScroll5 - Infinite scrolling API or is there any other library which does the job for me ?
If you want to use infinite scrolling , means on page load some content are pre load and then user scroll down and other content are load on scroll with lazy loging, if i am understan right then please try to use jscroll jquery plugin.. it's very good for infinite scroll.
http://jscroll.com/ you can find here document and example of this plugin.
Regards,
vinit