added index page

assets/css/swiper.css

@@ -0,0 +1,36 @@
+/* for swiper */
+
+.swiper-container-2 {
+ overflow: hidden;
+ position: absolute;
+}
+
+.swiper-slide {
+ text-align: center;
+ font-size: 18px;
+ background: #fff;
+ /* Center slide text vertically */
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ -webkit-justify-content: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ -webkit-align-items: center;
+ align-items: center;
+}
+
+.swiper-slide img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+.swiper-container-2 .swiper-slide img{
+ object-fit: contain;
+ height: 65%;
+}

components/shared/appFooter.vue

@@ -1,5 +1,5 @@
 <template>
- <footer class="footer mt-auto py-3 bg-light">
+ <footer class="footer mt-auto py-3 bg-white">
  <div class="text-muted text-center">
  E-Shop By Mahdi Kheibari
  </div>

components/shared/appHeader.vue

@@ -1,6 +1,6 @@
 <template>
  <header>
- <b-navbar toggleable="md" type="light" variant="light" class="py-0">
+ <b-navbar toggleable="md" type="light" variant="white" class="py-0">
  <b-navbar-brand href="#" class="ms-4">
  <div class="d-flex justify-content-center">
  <NuxtLogo />
@@ -35,10 +35,22 @@
  </b-navbar-nav>
  </b-collapse>
  </b-navbar>
+ <div>
+ <b-nav tabs class="bg-white">
+ <b-nav-item active>Home</b-nav-item>
+ <b-nav-item>All Product</b-nav-item>
+ <b-nav-item>About Us</b-nav-item>
+ <b-nav-item></b-nav-item>
+ </b-nav>
+ </div>
  </header>
 </template>
 <style scoped>
 .nuxt-logo {
  height: 25px !important;
 }
+.nav-link.active{
+ background-color: #f8f9fa !important;
+ border-bottom-color: #f8f9fa !important;
+}
 </style>

components/swiper/mainSwiper.vue

@@ -0,0 +1,46 @@
+<template>
+ <div class="swiper-container" :style="{ width: width, height: height }">
+ <!-- Additional required wrapper -->
+ <div class="swiper-wrapper">
+ <!-- Slides -->
+ <slot></slot>
+ </div>
+ <!-- If we need pagination -->
+ <div v-if="pagination" class="swiper-pagination"></div>
+
+ <!-- If we need navigation buttons -->
+ <div :class="['swiper-button-prev',{'text-success':!danger,'text-danger':danger}]"></div>
+ <div :class="['swiper-button-next',{'text-success':!danger,'text-danger':danger}]"></div>
+ </div>
+</template>
+
+<script>
+import Swiper, { Autoplay, EffectFade, Pagination, Navigation } from "swiper";
+Swiper.use([Autoplay, EffectFade, Pagination, Navigation]);
+export default {
+ props: {"width":String,"height":String,"danger":Boolean,"pagination":Boolean},
+ mounted() {
+ new Swiper(".swiper-container", {
+ loop: true,
+ pagination: {
+ el: ".swiper-pagination",
+ dynamicBullets: true,
+ },
+ navigation: {
+ nextEl: ".swiper-button-next",
+ prevEl: ".swiper-button-prev",
+ },
+ effect: "fade",
+ autoplay: {
+ delay: 2500,
+ disableOnInteraction: false,
+ }
+ });
+ },
+};
+</script>
+<style scoped>
+.swiper-container{
+ border-radius: 20px;
+}
+</style>

components/swiper/secondSwiper.vue

@@ -0,0 +1,30 @@
+<template>
+ <div class="swiper-container-2" :style="{ width: width, height: height }">
+ <!-- Additional required wrapper -->
+ <div class="swiper-wrapper">
+ <!-- Slides -->
+ <slot></slot>
+ </div>
+ <!-- If we need navigation buttons -->
+ <div class="swiper-button-prev text-success"></div>
+ <div class="swiper-button-next text-success"></div>
+ </div>
+</template>
+
+<script>
+import Swiper, {Navigation } from "swiper";
+Swiper.use([Navigation]);
+export default {
+ props: ["width", "height"],
+ mounted() {
+ new Swiper(".swiper-container-2", {
+ navigation: {
+ nextEl: ".swiper-button-next",
+ prevEl: ".swiper-button-prev",
+ },
+ slidesPerView:5,
+ spaceBetween:10
+ });
+ },
+};
+</script>

layouts/default.vue

@@ -1,6 +1,7 @@
 <template>
  <div>
  <appHeader />
+ <br>
  <nuxt />
  <appFooter />
  </div>
@@ -15,3 +16,8 @@ export default {
  },
 };
 </script>
+<style>
+body{
+ background: rgb(248, 249, 250) !important;
+}
+</style>

nuxt.config.js

@@ -21,11 +21,13 @@ export default {
 
  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
+ '@/assets/css/swiper.css',
+ '@/node_modules/swiper/swiper-bundle.css'
  ],
 
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
- '@/plugins/bootstrap-vue.js'
+ '@/plugins/bootstrap-vue.js',
  ],
 
  // Auto import components: https://go.nuxtjs.dev/config-components