Replace static hero images with responsive swiper

Author: w3bdesign

assets/images/Hero.jpg

@@ -1,30 +1,78 @@
 <template>
   <div>
-    <div
-      id="hero"
-      class="flex w-full mx-auto mt-16 bg-right bg-cover md:pt-0 md:items-center"
-    >
+    <swiper id="hero" ref="mySwiper" :options="swiperOption">
+      <swiper-slide
+        ><img src="~assets/images/Hero.jpg" />
+        <div
+          class="flex flex-col items-start justify-center w-full mx-auto tracking-wide lg:w-1/2"
+        >
+          <span
+            class="w-full p-4 mt-4 text-center text-white bg-black text-md lg:text-2xl lg:-mt-64"
+          >
+            Modern Pillow Sample Set
+          </span>
+        </div>
+      </swiper-slide>
+      <swiper-slide
+        ><img src="~assets/images/Hero2.jpg" />
+        <div
+          class="flex flex-col items-start justify-center w-full mx-auto tracking-wide lg:w-1/2"
+        >
+          <span
+            class="w-full p-4 mt-4 text-center text-white bg-black text-md lg:text-2xl lg:-mt-64"
+          >
+            Modern Interior Sample
+          </span>
+        </div>
+      </swiper-slide>
       <div
-        class="flex flex-col items-start justify-center w-full px-6 tracking-wide lg:w-1/2"
-      >
-        <span class="p-4 my-4 text-2xl text-white bg-black rounded-lg">
-          Modern Pillow Sample Set
-        </span>
-      </div>
-    </div>
+        slot="button-prev"
+        class="swiper-button-prev"
+        @click="swiper.slidePrev(1000, false)"
+      ></div>
+      <div
+        slot="button-next"
+        class="swiper-button-next"
+        @click="swiper.slideNext(1000, false)"
+      ></div>
+    </swiper>
   </div>
 </template>
 
 <script>
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
+
+import 'swiper/swiper-bundle.min.css'
+
 export default {
   name: 'Hero',
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  data() {
+    return {
+      swiperOption: {
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+      },
+    }
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.$swiper
+    },
+  },
+  mounted() {
+    this.swiper.slideTo(2, 2000, false)
+  },
 }
 </script>
 
 <style lang="postcss" scoped>
 #hero {
-  background-image: url('~assets/images/Hero.jpg');
-  height: 24rem;
   max-width: 1350px;
 }
 </style>

assets/images/Hero2.jpg

@@ -13,7 +13,7 @@ export default {
   },
   // Global page headers (https://go.nuxtjs.dev/config-head)
   head: {
-    title: 'nuxtjs-woocommerce',
+    title: 'NuxtJS WooCommerce',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
@@ -26,7 +26,10 @@ export default {
   css: ['@/assets/css/animate.min.css'],
 
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
-  plugins: ['~/plugins/vue-formulate'],
+  plugins: [
+    '~/plugins/vue-formulate',
+    { src: '~/plugins/vue-awesome-swiper', mode: 'client', ssr: false },
+  ],
 
   // Auto import components (https://go.nuxtjs.dev/config-components)
   components: true,

assets/images/samantha-gades-gKjLLN1T8HQ-unsplash.jpg

@@ -0,0 +1,7 @@
+// https://github.com/surmon-china/vue-awesome-swiper
+
+import Vue from 'vue'
+// import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'
+import VueAwesomeSwiper from 'vue-awesome-swiper'
+
+Vue.use(VueAwesomeSwiper)