danak/javaneh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create sliders with vue3-carousel package

Browse Source
This commit is contained in:
HAM!DREZA
2024-05-03 14:19:28 +03:30
parent aa38f8e7b4
commit 10a012ec8e
24 changed files with 14016 additions and 13809 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -1,2 +1,3 @@
node_modules/
.nuxt/
pages/text.vue
assets/css/main.css
+45 -5
View File
@@ -61,6 +61,17 @@ body {
background-position-y: -10vw;
}
@media (max-width: 768px) {
.carousel__pagination-item button::after {
width: 14vw !important;
height: 1vw !important;
padding: 0px !important;
margin: 0px 0.1vw !important;
border-radius: 10vw;
}
.carousel__pagination {
margin-top: 26.5vw !important;
margin-bottom: 21vw !important;
}
.ourStory {
background-image: url("/public/images/aboutBg.jpg");
background-repeat: no-repeat;
@@ -173,7 +184,6 @@ body {
.imgWrap .right:before {
background-position: -2001.4% 0;
}
section{}
.contact {
background-image: url("/public/images/aboutBg.jpg");
@@ -184,13 +194,43 @@ section{}
}
.slide1 {
background-image: url('/public/images/slider.jpg');
background-image: url("/public/images/slider.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.mediagallery {
background-image: url('/public/images/gallery2.jpg');
background-image: url("/public/images/gallery2.jpg");
background-size: cover;
}
.carousel__pagination-item button::after {
width: 5.365vw;
height: 0.25vw;
padding: 0px !important;
margin: 0px 0.1vw !important;
border-radius: 10vw;
}
:root {
--vc-clr-primary: #a62186 !important;
--vc-clr-secondary: #e5e5e5 !important;
--vc-clr-white: #ffffff;
}
.carousel__slide{
padding-right: 4vw !important;
display: flex;
justify-content: end !important;
}
.carousel__viewport {
height: 100% !important;
width: 100% !important;
text-align: end;
position: relative !important;
display: flex;
flex-direction: column;
justify-content: center;
}
.carousel__pagination {
margin-top: 10.5vw !important;
}
components/home-page/AboutUs.vue
+5
View File
@@ -130,4 +130,9 @@
</div>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
</script>
components/home-page/MediaSlider.vue
+68 -41
View File
@@ -1,57 +1,41 @@
<template>
<div class="flex flex-col lg:flex-row pb-[15vw] lg:pb-[5vw] px-[2vw] pt-[6.5vw]">
<div class="w-full lg:w-[35%] flex flex-col ps-[8vw] lg:ps-0">
<div
class="flex flex-col lg:flex-row pb-[15vw] lg:pb-[5vw] px-[2vw] pt-[6.5vw]"
>
<div
class="w-full lg:w-[25%] flex flex-col ps-[8vw] lg:ps-0 border-e-[1px]"
>
<div class="flex justify-between">
<p
class="mt-[2vw] lg:mt-0 lg:py-0 py-[3vw] text-[4.544vw] lg:text-[1.481vw] text-[#383E43] font-semibold"
>
رسانه
</p>
<div class="hidden lg:flex h-[50px] me-[0.5vw]">
<svg
class="hidden lg:block"
width="112"
height="50"
viewBox="0 0 112 50"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
class="cursor-pointer "
@click="this.$refs.carousel.next()"
width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="24.5" transform="rotate(-180 25 25)" stroke="#878787"/>
<path d="M22.0002 17.0799L28.5202 23.5999C29.2902 24.3699 29.2902 25.6299 28.5202 26.3999L22.0002 32.9199" stroke="#878787" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg
class="cursor-pointer ms-[0.5vw]"
@click="this.$refs.carousel.prev()"
width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="24.5" stroke="#383E43"/>
<g clip-path="url(#clip0_836_14506)">
<path
d="M27.9998 32.9201L21.4798 26.4001C20.7098 25.6301 20.7098 24.3701 21.4798 23.6001L27.9998 17.0801"
stroke="#383E43"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<g clip-path="url(#clip0_836_14507)">
<path d="M27.9998 32.9201L21.4798 26.4001C20.7098 25.6301 20.7098 24.3701 21.4798 23.6001L27.9998 17.0801" stroke="#383E43" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<circle
cx="87"
cy="25"
r="24.5"
transform="rotate(-180 87 25)"
stroke="#878787"
/>
<path
d="M84.0002 17.0799L90.5202 23.5999C91.2902 24.3699 91.2902 25.6299 90.5202 26.3999L84.0002 32.9199"
stroke="#878787"
stroke-width="2"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
<defs>
<clipPath id="clip0_836_14506">
<rect
width="24"
height="24"
fill="white"
transform="translate(13 13)"
/>
<clipPath id="clip0_836_14507">
<rect width="24" height="24" fill="white" transform="translate(13 13)"/>
</clipPath>
</defs>
</svg>
</div>
</div>
<div class="mt-[1vw] space-y-[1vw] text-[#878787]">
@@ -166,6 +150,27 @@
</div>
</div>
<Carousel
ref="carousel"
class="lg:w-[75%] mt-[8vw] lg:mt-0 w-full"
:wrap-around="true"
:breakpoints="breakpoints"
>
<Slide v-for="slide in 10" :key="slide">
<div
class="carousel-item h-[85.641vw] lg:h-[28.021vw] border-[1.5px] rounded-[500px] flex justify-center items-center mx-auto"
>
<div
class="mx-[3vw] md:mx-[1vw] mediagallery w-[53.846vw] lg:w-[18.073vw] h-[76.41vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"
></div>
</div>
</Slide>
</Carousel>
<!--
<div
class="mt-[8vw] lg:mt-0 w-full grid grid-cols-1 lg:grid-cols-3 border-s-none lg:border-s-[1px] ms-0 lg:ms-[3vw] ps-0 lg:ps-[1vw]"
>
@@ -199,6 +204,28 @@
class="mediagallery lg:w-[18.073vw] lg:h-[25.938vw] border-[1.5px] rounded-[500px]"
></div>
</div>
</div>
</div> -->
</div>
</template>
<script>
export default defineComponent({
name: 'Breakpoints',
data: () => ({
breakpoints: {
// 700px and up
700: {
itemsToShow: 1,
snapAlign: 'center',
},
// 1024 and up
1024: {
itemsToShow: 3.3,
snapAlign: 'start',
},
}
})
})
</script>
components/honor-page/Slider.vue
+31 -4
View File
@@ -1,6 +1,33 @@
<template>
<div class="relative h-[97.436vw] md:h-[45.938vw] flex flex-col items-center">
<div class="slide1 h-[100%] w-full text-white flex flex-col justify-center ps-[4vw]">
<div class="relative h-[97.436vw] md:h-[45.938vw] flex flex-col">
<div
class="slide1 h-[100%] w-full text-white flex flex-col justify-center"
>
<Carousel :autoplay="5000" :wrap-around="true"
>
<Slide v-for="slide in 3" :key="slide">
<div class="carousel__item ">
<h1 class="text-[6.469vw] md:text-[2.457vw] font-semibold">
فروشگاه محصولات
<span class="text-[#A62186]">ارگانیک</span>
</h1>
<p class="text-[3.19vw] md:text-[0.938vw] w-[100%] md:w-[39.531vw]">
وب سایت جوانه شرکتی در حوزه تامین و توزیع محصولات طبیعی، ارگانیک و
سالم میباشد که این امکان را به مصرف کننده میدهد تا بتواند انواع
محصولات تازه را با حق انتخاب و تنوع بسیار بالا و با مناسب‌ترین
قیمت داشته باشد.
</p>
</div>
</Slide>
<template #addons>
<Pagination />
</template>
</Carousel>
<!--
<h1 class="text-[6.469vw] md:text-[2.457vw] font-semibold">
فروشگاه محصولات
<span class="text-[#A62186]">ارگانیک</span>
@@ -15,7 +42,7 @@
<path d="M3 3H106" stroke="#A62186" stroke-width="5" stroke-linecap="round"/>
<path d="M130 3H233" stroke="#E5E5E5" stroke-width="5" stroke-linecap="round"/>
<path d="M257 3H360" stroke="#E5E5E5" stroke-width="5" stroke-linecap="round"/>
</svg>
</svg> -->
</div>
</div>
</template>
nuxt.config.ts
+10 -1
View File
@@ -2,7 +2,14 @@
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ['@nuxtjs/tailwindcss', '@hypernym/nuxt-gsap', 'nuxt3-leaflet']
modules: [
'@nuxtjs/tailwindcss',
'@hypernym/nuxt-gsap',
'nuxt3-leaflet',
'nuxt-swiper',
"vue3-carousel-nuxt",
]
,
tailwindcss: {
// Options
@@ -18,4 +25,6 @@ export default defineNuxtConfig({
css : ['~/assets/css/main.css'],
})
package-lock.json
Generated
+66 -1
View File
@@ -10,8 +10,11 @@
"gsap": "^3.12.5",
"leaflet": "^1.9.4",
"nuxt": "^3.11.2",
"nuxt-swiper": "^1.2.2",
"swiper": "^11.1.1",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
"vue-router": "^4.3.0",
"vue3-carousel-nuxt": "^1.1.1"
},
"devDependencies": {
"@hypernym/nuxt-gsap": "^2.4.2",
@@ -7990,6 +7993,33 @@
"gsap": "^3.11.5"
}
},
"node_modules/nuxt-swiper": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/nuxt-swiper/-/nuxt-swiper-1.2.2.tgz",
"integrity": "sha512-y4s/srISP4OuhXbYg9/W1/6EWnbcoHRGEKBKAvGP0I2h0b3enhqZNEk7854M3F89ys8waacBXektPzamgl5xwQ==",
"dependencies": {
"@nuxt/kit": "^3.7.0",
"swiper": "^10.2.0"
}
},
"node_modules/nuxt-swiper/node_modules/swiper": {
"version": "10.3.1",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-10.3.1.tgz",
"integrity": "sha512-24Wk3YUdZHxjc9faID97GTu6xnLNia+adMt6qMTZG/HgdSUt4fS0REsGUXJOgpTED0Amh/j+gRGQxsLayJUlBQ==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/swiperjs"
},
{
"type": "open_collective",
"url": "http://opencollective.com/swiper"
}
],
"engines": {
"node": ">= 4.7.0"
}
},
"node_modules/nuxt3-leaflet": {
"version": "1.0.12",
"resolved": "https://registry.npmjs.org/nuxt3-leaflet/-/nuxt3-leaflet-1.0.12.tgz",
@@ -10264,6 +10294,24 @@
"url": "https://opencollective.com/svgo"
}
},
"node_modules/swiper": {
"version": "11.1.1",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.1.tgz",
"integrity": "sha512-jGmEA/fNz1lACIcY4/40ggm1Gcyv+EUivmgV/Jd2WFPsEJhbWXnRAwzZR8OPjkBLtDxmzcoYG/iiAMWfRs0YKQ==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/swiperjs"
},
{
"type": "open_collective",
"url": "http://opencollective.com/swiper"
}
],
"engines": {
"node": ">= 4.7.0"
}
},
"node_modules/system-architecture": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/system-architecture/-/system-architecture-0.1.0.tgz",
@@ -11566,6 +11614,23 @@
"resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
"integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
},
"node_modules/vue3-carousel": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/vue3-carousel/-/vue3-carousel-0.3.3.tgz",
"integrity": "sha512-VsuOBE4LG9lxAiYGR9U7ps4RyJ4oFQGzk79/49ybvoxzNpahPAVWIDHKK3a1lOv0CSplFq6u4FvaFLZ8x3FgWg==",
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/vue3-carousel-nuxt": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/vue3-carousel-nuxt/-/vue3-carousel-nuxt-1.1.1.tgz",
"integrity": "sha512-vhsHeB1bjTPSrKUmci0saXA2ueT4g7WArCG2cv6NzXiVnyaPZUCUjZcPcwTqQ86amRUjg92NgGhOlgDsz4pNHg==",
"dependencies": {
"@nuxt/kit": "^3.11.0",
"vue3-carousel": "^0.3.3"
}
},
"node_modules/webidl-conversions": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
package.json
+4 -1
View File
@@ -13,8 +13,11 @@
"gsap": "^3.12.5",
"leaflet": "^1.9.4",
"nuxt": "^3.11.2",
"nuxt-swiper": "^1.2.2",
"swiper": "^11.1.1",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
"vue-router": "^4.3.0",
"vue3-carousel-nuxt": "^1.1.1"
},
"devDependencies": {
"@hypernym/nuxt-gsap": "^2.4.2",
pages/test.vue
+30
View File
@@ -0,0 +1,30 @@
<template>
<div class="relative h-[97.436vw] md:h-[45.938vw] flex flex-col items-center">
<Carousel :autoplay="2000" :wrap-around="true" paginationColor="gray" paginationActiveColor="red">>
<Slide v-for="slide in 3" :key="slide">
<div class="carousel__item">{{ slide }}</div>
</Slide>
<template #addons>
<Pagination />
</template>
</Carousel>
</div>
</template>
<script setup>
</script>
<style scoped>
</style>