Carousel Swiper navigation

Author: w3bdesign

public/css/app.css

@@ -863,6 +863,18 @@ video {
   max-height: 100%;
 }
 
+.max-h-\[384px\] {
+  max-height: 384px;
+}
+
+.max-h-\[500px\] {
+  max-height: 500px;
+}
+
+.max-h-\[600px\] {
+  max-height: 600px;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -927,6 +939,10 @@ video {
   max-width: 768px;
 }
 
+.max-w-\[1504px\] {
+  max-width: 1504px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }

public/js/app.js

@@ -1,29 +1,48 @@
 <template>
-    <swiper-container ref="swiperRef" class="swiper-container" slides-per-view="1" pagination-el=".swiper-pagination">
-        <swiper-slide v-for="(image, index) in images" :key="index" class="swiper-slide">
+    <swiper :navigation="true" :modules="[Navigation]" class="mySwiper">
+        <swiper-slide v-for="(image, index) in images" :key="index">
             <img :src="image" :alt="'Image ' + (index + 1)" />
         </swiper-slide>
-        <div class="swiper-pagination"></div>
-    </swiper-container>
+    </swiper>
 </template>
 
 <script setup>
-import { register } from 'swiper/element/bundle';
-import 'swiper/swiper-bundle.css';
-import { ref } from 'vue';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import { Navigation } from 'swiper';
 
 const props = defineProps({
     images: Array,
 });
 
-register();
-
-const swiperRef = ref(null);
+defineExpose({
+    Swiper,
+    SwiperSlide,
+});
 </script>
 
 <style>
+.mySwiper {
+    width: 100%;
+    height: 300px;
+}
+
+.swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    background: #fff;
+
+    /* Center slide images vertically */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .swiper-slide img {
+    display: block;
     width: 100%;
-    height: auto;
+    height: 100%;
+    object-fit: cover;
 }
 </style>

resources/js/components/Index/Carousel.vue

@@ -8,8 +8,8 @@
 import { ref } from 'vue';
 
 const carouselImages = ref([
-    'https://via.placeholder.com/800x300?text=Image+1',
-    'https://via.placeholder.com/800x300?text=Image+2',
-    'https://via.placeholder.com/800x300?text=Image+3',
+    '/images/Hero.jpg',
+    '/images/Hero.jpg',
+    '/images/Hero.jpg',
 ]);
 </script>