How to optimize slider by not rendering new slides?

[KindSpidey]

Hey, guys, this is my first day of using Swiper, so I am not sure I'm doing everything right.
So, my first goal was to create simple Swipe Slider, and I did it. But in my slider I use Lottie animations and... they start lagging.

This is my code:

<template>
  <swiper
    :slides-per-view="1"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>
    <OnboardItem
        title="Title 1"
        description="Description"
        :animationData=diamond />
    </swiper-slide>
    <swiper-slide>
    <OnboardItem
        title="Title 2"
        description="Description"
        :animationData=instruments />
    </swiper-slide>
    
    And 3 swiper-slide more
    ......
    
    <script>

  import { Swiper, SwiperSlide } from 'swiper/vue';
  import diamond from '../assets/diamond.json';
  import instruments from '../assets/instruments.json';
  import wallet from '../assets/wallet.json';
  import fees from '../assets/fees.json';
  import adventure from '../assets/adventure.json';
  import OnboardItem from "./OnboardItem.vue";
  import 'swiper/css';
  console.log(diamond)
  export default {
    methods: {},
    components: {
      OnboardItem,
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        diamond,
        instruments,
        wallet,
        fees,
        adventure,

      };
    },
  };
</script>

Can you tell me, how this can be optimized? When I have one slide element, animation does not freeze, when 5 - all of them are lagging. Also, can you tell me, is it okay that I'm using Swiper Vue instead of Swiper Element?