swiper in product detail

src/components/ProductDetail.vue

       <!--<ion-input v-model="name" placeholder="Your name" label='xx'></ion-input>-->
     <!--</ion-item>-->
     <template v-if="product">
-      <ion-img :src="product.cover_image_str"></ion-img>
+      <swiper>
+      <swiper-slide v-for="p in product.product_photos">
+          <ion-img :src="p.image"></ion-img>
+      </swiper-slide>
+      </swiper>
+      
+      <!-- <ion-img :src="product.cover_image_str"></ion-img> -->
+      <ion-grid class='ion-hide'>
+        <ion-row>
+            <ion-col size=3 v-for="(p,i) in product.product_photos" :key='p.id'>
+              <ion-img :src="p.image"></ion-img>
+            </ion-col>
+        </ion-row>
+      </ion-grid>
       <ion-text>
         <h1>{{ product.name }}</h1>
         <vue-showdown :markdown="product.description" />
   IonButtons,
   IonButton,
   IonItem,
+  IonGrid,
+  IonRow,
+  IonCol,
   IonLabel,
   IonInput,
   IonImg,
   IonText,
   modalController,
   onIonViewWillEnter, 
+  IonThumbnail
 } from '@ionic/vue';
 
 import { VueShowdown } from 'vue-showdown';
 import axios from 'axios';
 import { API_URL } from '@/api_config';
 
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+import '@ionic/vue/css/ionic-swiper.css';
+
 const props = defineProps(['pid'])
 let pid = ref(0)
 let product = ref(null)

src/views/Tab1Page.vue

 
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import 'swiper/css';
-import '@/theme/myapp.scss';
 import '@ionic/vue/css/ionic-swiper.css';
+
+import '@/theme/myapp.scss';
 import { API_URL } from '@/api_config';
 import { ref, onMounted, reactive } from 'vue'