Skip to content

Commit

Permalink
changes in the spacebetween slides
Browse files Browse the repository at this point in the history
  • Loading branch information
@cp-ashish-k
cp-ashish-k committed Oct 27, 2023
1 parent 6265044 commit 1a48de2
Showing 1 changed file with 78 additions and 69 deletions.
147 changes: 78 additions & 69 deletions vue-frontend/src/components/flutter-app-development/DevelopmentSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,83 +62,84 @@
</div>

<!-- Flutter Desktop Swiper UI -->
<div class="tw-hidden lg:tw-flex tw-container tw-mt-[4.5rem]">
<div class="swiper-content tw-flex tw-flex-col tw-flex-1">
<swiper
:slidesPerView="1.5"
:spaceBetween="80"
:direction="'vertical'"
:speed="1500"
:mousewheel="{
forceToAxis: true,
sensitivity: 1,
releaseOnEdges: true,
}"
:keyboard="true"
:modules="modules"
class="swiper-container tw-h-[600px]"
@slideChange="activeIndex = $event.activeIndex"
<div
class="tw-hidden lg:tw-flex tw-container tw-mt-[4.5rem] tw-relative tw-overflow-hidden"
>
<hr
class="tw-absolute tw-h-screen tw-left-[50%] tw-border-[0.1px] tw-opacity-[0.5]"
/>
<swiper
:slidesPerView="1.5"
:spaceBetween="20"
:direction="'vertical'"
:speed="1500"
:mousewheel="{
forceToAxis: true,
sensitivity: 1,
releaseOnEdges: true,
}"
:modules="modules"
class="swiper-container tw-h-[600px]"
@slideChange="onSlideChange"
>
<swiper-slide
v-for="(item, index) in items"
:key="index"
:class="[item.classname,
{
'tw-opacity-50': activeIndex !== index,
'tw-opacity-100':
activeIndex === index ||
(activeIndex === item.length && index === 0),
},
]"
>
<swiper-slide
v-for="(item, index) in items"
:key="index"
:class="[
{
'tw-opacity-50': activeIndex !== index,
'tw-opacity-100':
activeIndex === index ||
(activeIndex === item.length && index === 0),
},
]"
>
<div class="slide-container tw-h-full">
<div
:class="[
'tw-flex tw-gap-[2.5rem]',
{
'tw-flex-row tw-text-right ': index % 2 === 0,
'tw-flex-row-reverse tw-text-left': index % 2 !== 0,
},
]"
>
<div class="tw-flex tw-flex-col tw-flex-1 tw-gap-[1.5rem]">
<div class="header-3">
<span v-html="item.desktoptitle"></span>
</div>
<div class="sub-h3-regular">
<p
v-for="(list, listIndex) in item.description"
:key="listIndex"
>
{{ list }}
</p>
</div>
<div class="slide-container tw-h-full">
<div
:class="[
'tw-flex tw-gap-[2.5rem]',
{
'tw-flex-row tw-text-right ': index % 2 === 0,
'tw-flex-row-reverse tw-text-left': index % 2 !== 0,
},
]"
>
<div class="tw-flex tw-flex-col tw-flex-1 tw-gap-[1.5rem]">
<div class="header-3">
<span v-html="item.desktoptitle"></span>
</div>
<hr class="tw-h-screen tw-border-[0.1px] tw-opacity-[0.5]" />
<div
class="tw-flex-1"
:class="{ 'tw-relative': index % 2 !== 0 }"
>
<img
:src="item.image"
alt="development-service-image"
class="w-full h-full object-cover"
:class="{
'tw-absolute tw-right-0': index % 2 !== 0,
}"
loading="lazy"
/>
<div class="sub-h3-regular">
<p
v-for="(list, listIndex) in item.description"
:key="listIndex"
>
{{ list }}
</p>
</div>
</div>
<div
class="tw-flex-1"
:class="{ 'tw-relative': index % 2 !== 0 }"
>
<img
:src="item.image"
alt="development-service-image"
class="w-full h-full object-cover"
:class="{
'tw-absolute tw-right-0': index % 2 !== 0,
}"
loading="lazy"
/>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</template>
<script type="module">
import { Autoplay, Mousewheel, Keyboard, Pagination } from "swiper/modules";
import { Autoplay, Mousewheel, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import consultation from "@/assets/images/flutter-app-development/development/consultation.webp";
import design from "@/assets/images/flutter-app-development/development/design.webp";
Expand All @@ -148,7 +149,7 @@ import maintainance from "@/assets/images/flutter-app-development/development/ma
export default {
data() {
return {
modules: [Autoplay, Mousewheel, Keyboard, Pagination],
modules: [Autoplay, Mousewheel, Pagination],
activeIndex: 0,
items: [
{
Expand All @@ -174,6 +175,7 @@ export default {
description: [
"We transform your unique business needs into robust, efficient, and beautifully designed mobile apps. We leverage Flutter's single codebase feature, allowing us to expedite the development process without compromising on the app's performance, feel, or look. Our team employs Flutter's hot-reload functionality to build dynamic, high-quality applications that offer a native experience on both iOS and Android platforms. From feature-rich eCommerce apps to interactive social networking apps, we deliver custom Flutter solutions that align with your business goals and deliver a seamless user experience across all devices. ",
],
classname:" !tw-mb-4 xl:!tw-mb-16"
},
{
title: "Flutter App Deployment",
Expand All @@ -182,6 +184,7 @@ export default {
description: [
"We understand that app development doesn't end with coding. Ensuring that your application gets successfully deployed on the App Store and Google Play Store is equally important. Our team navigates the complexities of app submission guidelines, takes care of the application's configuration, manages the app store metadata, and executes a successful launch. We also monitor the app's performance post-launch, ensuring smooth functioning and immediate troubleshooting. Experience a worry-free deployment and watch your Flutter application take flight with our diligent deployment services.",
],
classname:" !tw--mb-6 xl:!tw-mb-4"
},
{
title: "Maintenance and Support",
Expand All @@ -190,10 +193,16 @@ export default {
description: [
"We believe that maintaining an application is as crucial as developing it. After your app's successful deployment, we provide ongoing support to ensure its optimal performance, stability, and user satisfaction. Our services include regular updates, bug fixes, performance monitoring, code optimization, and adding new features as per market trends or user feedback. With our round-the-clock support, you can rest assured that your application stays up-to-date,secure, and relevant in the ever-evolving app market, ensuring its long-term success and user engagement.",
],
classname:"!tw-mb-4"
},
],
};
},
methods: {
onSlideChange(event) {
this.activeIndex = event.activeIndex;
},
},
computed: {
item() {
return Array(1).fill(this.items).flat();
Expand Down

0 comments on commit 1a48de2

Please sign in to comment.