Sentry performance analysis with Swiper Example

Swiper1UseImage.vue

<script setup>
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/mousewheel';
import 'swiper/css/autoplay';
import 'swiper/css/parallax';
import 'swiper/css/a11y';

//-- Other imports and functions 
</script>

<template>
  <div class="container" v-if="sliderData">
    <Swiper :modules="SwiperModules" :slides-per-view="3" :space-between="40" :navigation="true" :mousewheel="true"
      :autoHeight="true" :parallax="true">
      <SwiperSlide v-for="item in sliderData" :key="item">
        <div class="carousel__item">
          <div class="card border-0" @click="moviesDetailGo(item.id, customFields.clickable)">
            <UseImage v-if="customFields.imagePath" :src="ImagePath(item[customFields.imagePath])" class="rounded-3"
              alt="Picture">
              <template #loading>
                Loading..
              </template>

              <template #error>
                Failed
              </template>
            </UseImage>

            <div class="card-itemc cast-slider">
              <h5 class="card-title text-truncate fw-bold" v-if="customFields.title">{{ item[customFields.title] }}</h5>
              <div class="d-flex justify-content-between align-items-center">
                <small class="text-muted" v-if="customFields.profession">{{ item[customFields.profession] }}</small>
                <span class="badge bg-warning mx-1" v-if="customFields.vote">{{ Number(item[customFields.vote]).toFixed(2)
                }}
                </span>

              </div>
            </div>
          </div>
        </div>
      </SwiperSlide>
    </Swiper>
  </div>
</template>

Swiper2Img.vue

<script setup>
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/mousewheel';
import 'swiper/css/autoplay';
import 'swiper/css/parallax';
import 'swiper/css/a11y';

//-- Other imports and functions 
</script>

<template>
  <div class="container" v-if="sliderData">
    <Swiper :modules="SwiperModules" :slides-per-view="3" :space-between="40" :navigation="true" :mousewheel="true"
      :autoHeight="true" :parallax="true">
      <SwiperSlide v-for="item in sliderData" :key="item">
        <div class="carousel__item">
          <div class="card border-0" @click="moviesDetailGo(item.id, customFields.clickable)">
            <img v-if="customFields.imagePath" :src="ImagePath(item[customFields.imagePath])" class="rounded-3"
              alt="Picture">
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
            <div class="card-itemc cast-slider">
              <h5 class="card-title text-truncate fw-bold" v-if="customFields.title">{{ item[customFields.title] }}</h5>
              <div class="d-flex justify-content-between align-items-center">
                <small class="text-muted" v-if="customFields.profession">{{ item[customFields.profession] }}</small>
                <span class="badge bg-warning mx-1" v-if="customFields.vote">{{ Number(item[customFields.vote]).toFixed(2)
                }}
                </span>

              </div>
            </div>
          </div>
        </div>
      </SwiperSlide>
    </Swiper>
  </div>
</template>

Swiper3ImgLazy.vue

<script setup>
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/mousewheel';
import 'swiper/css/autoplay';
import 'swiper/css/parallax';
import 'swiper/css/a11y';

//-- Other imports and functions 
</script>

<template>
  <div class="container" v-if="sliderData">
    <Swiper :modules="SwiperModules" :slides-per-view="3" :space-between="40" :navigation="true" :mousewheel="true"
      :autoHeight="true" :parallax="true" :lazy="true">
      <SwiperSlide v-for="item in sliderData" :key="item">
        <div class="carousel__item">
          <div class="card border-0" @click="moviesDetailGo(item.id, customFields.clickable)">
            <img v-if="customFields.imagePath" loading="lazy" :src="ImagePath(item[customFields.imagePath])"
              class="rounded-3" alt="Picture">
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
            <div class="card-itemc cast-slider">
              <h5 class="card-title text-truncate fw-bold" v-if="customFields.title">{{ item[customFields.title] }}</h5>
              <div class="d-flex justify-content-between align-items-center">
                <small class="text-muted" v-if="customFields.profession">{{ item[customFields.profession] }}</small>
                <span class="badge bg-warning mx-1" v-if="customFields.vote">{{ Number(item[customFields.vote]).toFixed(2)
                }}
                </span>

              </div>
            </div>
          </div>
        </div>
      </SwiperSlide>
    </Swiper>
  </div>
</template>

Swiper4ImgLazyCSS.vue

<script setup>
//-- Other imports and functions 
</script>

<template>
  <div class="container" v-if="sliderData">
    <Swiper :modules="SwiperModules" :slides-per-view="3" :space-between="40" :navigation="true" :mousewheel="true"
      :autoHeight="true" :parallax="true" :lazy="true">
      <SwiperSlide v-for="item in sliderData" :key="item">
        <div class="carousel__item">
          <div class="card border-0" @click="moviesDetailGo(item.id, customFields.clickable)">
            <img v-if="customFields.imagePath" loading="lazy" :src="ImagePath(item[customFields.imagePath])"
              class="rounded-3" alt="Picture">
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
            <div class="card-itemc cast-slider">
              <h5 class="card-title text-truncate fw-bold" v-if="customFields.title">{{ item[customFields.title] }}</h5>
              <div class="d-flex justify-content-between align-items-center">
                <small class="text-muted" v-if="customFields.profession">{{ item[customFields.profession] }}</small>
                <span class="badge bg-warning mx-1" v-if="customFields.vote">{{ Number(item[customFields.vote]).toFixed(2)
                }}
                </span>

              </div>
            </div>
          </div>
        </div>
      </SwiperSlide>
    </Swiper>
  </div>
</template>