ایجاد Swiper مانند Netflix را در Vue

اگر مدتی است که برای وب کار می کنید ، در ساخت swiper ها حداقل با برخی مشکلات روبرو شده اید – به دلایلی ، همیشه به نظر می رسد که راهکار خاص خود را دارند. این swiper ها به اندازه دلخواه شما پاسخگو نیستند و یا کار طراحی گسترده ای باید انجام شود تا به نیمی از آنچه انتظار داشتید برسید.
حال اگر تا کنون از Netflix استفاده کرده اید ، دیده اید که swiper های فیلم آنها چقدر ظریف و روان هستند. به لطف Vue و کتابخانه vue-awesome-swiper ، می توانید swiperهای مخصوص خود را بسازید.
در این آموزش یک swiper در Vue ایجاد خواهید کرد.
• یک محیط توسعه محلی برای Node.js. نیاز دارید. آموزش نحوه نصب Node.js و ایجاد محیط توسعه محلی را دنبال کنید.
مرحله 1 – ایجاد پروژه
Vue یک چارچوب frontend پیشرونده است که به ما کمک می کند تا رابط های تعاملی و شگفت انگیزی ایجاد کنیم. می توانید در این لینک درمورد Vue اطلاعات بیشتری کسب کنید
برای نصب Vue در دستگاه خود ، باید دستور زیر را اجرا کنید:
$ npm install -g vue-cli

این دستور Vue را به صورت جهانی روی دستگاه شما نصب می کند. برای تأیید نصب Vue ، دستور زیر را در ترمینال خود اجرا کنید:
$ vue –version

اگر به عنوان نتیجه یک عدد نسخه دریافت کردید ، یعنی Vue را روی دستگاه خود نصب کرده اید.
اکنون که Vue بر روی دستگاه های شما نصب شده است ، آماده هستیم تا ساخت خود را آغاز کنیم. برای ایجاد برنامه ، از Vue CLI برای شروع کار استفاده کنید. دستور زیر را در ترمینال خود اجرا کنید:
$ vue init webpack netflix-like-swipers

این دستور اعلانی را برای تکمیل کار به ما نشان می دهد و هنگامی که کارها را انجام دادیم ، یک پروژه نمونه Vue را با استفاده از webpack ایجاد می کنیم تا برنامه خود را تغییر داده و بسازیم.

مرحله 2 – ایجاد مؤلفه فیلم
هدف مؤلفه ها استفاده مجدد از برخی قسمت های UI ماست. در این حالت ، ما قصد داریم فیلم های زیادی داشته باشیم ، بنابراین می خواهیم یک مولفه فیلم بسازیم و سپس همانطور که می خواهیم در طول برنامه از آن استفاده کنیم.
برای ساخت مؤلفه فیلم ، یک فایل Movies.vue را در دیرکتوری src/components/ ایجاد کنید
$ nano src/components/Movie.vue

در Movie.vue ، مؤلفه خود را به شرح زیر می سازیم:
Movie.vue
<script>
export default {
name: ‘Movie’,
props : [
‘image’,
‘title’,
‘description’,
‘duration’
],
}
</script>

در اینجا ، ما کامپوننت خود را نامگذاری می کنیم و همچنین props را برای مولفه ها مشخص میکنیم که در هر بار استفاده از مؤلفه اضافه می شود .
برای تعریف الگوی مؤلفه ، کد زیر را اضافه کنید:
Movie.vue
<template>
<div class=”movie” v-bind:style=”{ backgroundImage: ‘url(‘ + image + ‘)’ }”>
<div class=”content”>
<h1 class=”title”>{{ title }}</h1>
<p class=”description”>{{ description }}</p>
<p class=”duration”>{{ duration }}</p>
</div>
</div>
</template>

سپس برای کنترل نحوه نمایش فیلم ، یک ظاهر طراحی شده برای مؤلفه اضافه کنید:
Movie.vue
<style scoped>
h1, h2 {
font-weight: normal;
}
.movie{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
text-align: left;
padding: 10px;
width : 350px;
height : 500px;
background-color: rgba(255,255,255,0.7);
background-repeat: no-repeat;
background-blend-mode: overlay;
background-size: cover;
}
</style>

اکنون که مؤلفه فیلم خود را ایجاد کرده اید ، Swiper ها را در برنامه ادغام می کنید.
مرحله 3 – ایجاد مؤلفه HomePage با Vue-Awesome-Swiper
ماژول را با دستور زیر نصب کنید:
$ npm install vue-awesome-swiper –save

اکنون یک مولفه HomePage.vue را در دیرکتوری src/components ایجاد کنید که در آن از swiper استفاده خواهیم کرد.
$ touch src/components/HomePage.vue

در HomePage.vue ، مؤلفه را ایجاد کرده و مؤلفه های Movie، swiper، swiperSlide را وارد کنید. و اسلایدر را با استفاده از خصوصیات thedata برای مؤلفه پیکربندی کنید:
HomePage.vue
<script>
import Movie from ‘./Movie’
import ‘swiper/dist/css/swiper.css’
import { swiper, swiperSlide } from ‘vue-awesome-swiper’

export default {
name: ‘HomePage’,
components: {
Movie,
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
direction : ‘vertical’,
pagination: {
el: ‘.swiper-pagination’,
type: ‘bullets’
},
}
}
}
}
</script>
در این حالت ، مشخص کردیم که می خواهیم swipers ما به صورت عمودی باشند و سبک صفحه بندی باید bullets باشد
قالب، مولفه های تکی Movie را لود می کند و محتوا را تنظیم می کند:
https://via.placeholder.com/728×90.png?text=Visit+WhoIsHostingThis.com+Buyers+Guide
C/O https://placeholder.com/
HomePage.vue
<template>
<swiper :options=”swiperOption”>

<swiper-slide>
<Movie image=”https://via.placeholder.com/300×450.png?text=Movie1″ title=”Movie 1″ description=”Movie 1 description” duration=”2hrs”/>
</swiper-slide>
<swiper-slide>
<Movie image=”https://via.placeholder.com/300×450.png?text=Movie1″ title=”Movie 2″ description=”Movie 2 description” duration=”2hrs”/>
</swiper-slide>

<swiper-slide>
<Movie image=”https://via.placeholder.com/300×450.png?text=Movie1″ title=”Movie 5″ description=”Movie 5 description” duration=”2hrs”/>

</swiper-slide>

ما از مؤلفه <swiper /> استفاده می کنیم و مولفه های <swiper-slide /> بسیاری در داخل آن داریم. برای نگه داشتن عنصر صفحه بندی نیز یک div اضافه کردیم.
CSS زیر را به فایل اضافه کنید تا swiper را طراحی کنید:
HomePage.vue
<style scoped>
.swiper-slide{
display: flex;
justify-content: center;
flex-direction: column;
}
.swiper-container {
height : 500px;
}
</style>

فایل را ذخیره کنید. اکنون می توانید مؤلفه را ارائه دهید.
مرحله 4 – ارائه مؤلفه های ما
برای ارائه مولفه ها ، آنها را وارد کنید و در فایل src / App.vue استفاده کنید.
فایل را در ویرایشگر خود باز کنید:
$ nano src/App.vue

ابتدا کامپوننت HomePage را وارد کنید و swiper را مقدار اولیه بدهید:
App.vue
<script>
import HomePage from ‘./components/HomePage’
export default {
name: ‘App’,
components: {
HomePage
},
data() {
return {
swiperType : ‘Easy Vertical Swiper’
}
}
}
</script>

سپس الگو را اضافه کنید:
App.vue
<template>
<div id=”app”>
<h1>{{ swiperType }}</h1>
<HomePage/>
</div>
</template>

در آخر ، یک ظاهر طراحی اضافه کنید:
App.vue
<style>
#app {
font-family: ‘Avenir’, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
display: flex;
align-items: center;
flex-direction: column;
}
</style>

اطمینان حاصل کنید که همه فایل ها ذخیره شده اند و سرور مجازی توسعه را با دستور زیر شروع می کنید:
npm run dev

با این دستور یک سرور مجازی توسعه شروع می شود. برای مشاهده برنامه خود به http: // localhost: 8080 مراجعه کنید.
مرحله 5 – جستجوی انواع دیگر Swiper ها
اکنون که مشاهده کردیم که Swiperهای ساده چطور کار می کنند ، بیایید گزینه های بیشتری را بررسی کنیم. به افکت های Swiper CoverFlow سه بعدی و Swiperهای جایگزیده نگاهی خواهیم انداخت. برای نمونه های بیشتر swiper ، می توانید مثال های آن را در صفحه پروژه vue-awesome-swiper مرور کنید.
برای ایجاد یک Swiper افکت سه بعدی CoverFlow ، گزینه های کشویی را در HomePage.vue تنظیم کنید تا به این شکل درآید: // HomePage.vue
<script>
[..]
export default {
name: ‘HomePage’,
[…]
data() {
return {
swiperOption: {
effect: ‘coverflow’,
grabCursor: true,
centeredSlides: true,
slidesPerView: ‘5’,
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows : false
},
pagination: {
el: ‘.swiper-pagination’
}
}
}
}
}
</script>

اکنون ممکن است از خودتان بپرسید ، “اگر می خواستم در swiper های خود swiper داشته باشم باید چه کار میکردم”. برای انجام این کار ، HomePage.vue خود را به شرح زیر تغییر دهید:
// HomePage.vue
<script>
[…]
export default {
[…]
data() {
return {
swiperOptionh: {
spaceBetween: 50,
pagination: {
el: ‘.swiper-pagination-h’,
clickable: true
}
},
swiperOptionv: {
direction: ‘vertical’,
spaceBetween: 50,
pagination: {
el: ‘.swiper-pagination-v’,
clickable: true
}
}
}
}
}
</script>

ما تنظیمات مربوط به swipers های مختلف را مشخص می کنیم و سپس در الگوی خود ، ساختاری مانند این داریم:
<template>
<swiper :options=”swiperOptionh”>
<swiper-slide>
[…]
</swiper-slide>
[…]
<swiper-slide>
<swiper :options=”swiperOptionv”>
<swiper-slide>
[…]
</swiper-slide>
[…]
<div class=”swiper-pagination swiper-pagination-v” slot=”pagination”></div>
</swiper>
</swiper-slide>
[…]
<div class=”swiper-pagination swiper-pagination-h” slot=”pagination”></div>
</swiper>
</template>

توجه کنید که چگونه از:options=”swiperOptionh” برای مشخص کردن پیکربندی های horizontal swiper و از :options=”swiperOptionv” برای vertical swiper استفاده می کنیم .
اکنون که نمونه های پایه swiper را دیدیم ، به خوبی میتوانیم به ساخت Netflix مانند swipers بپردازیم.
فایل HomePage.vue خود را ویرایش کنید تا به این شکل ظاهر شود:
// HomePage.vue
<script>
[…]
export default {
[…]
data() {
return {
swiperOptions : {
slidesPerView: 5,
spaceBetween: 0,
freeMode: true,
loop: true,
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’
}
}
}
}
}
</script>

با انتخاب تعداد فیلم هایی که در هر نمایش می خواهیم ، گزینه های مربوط به swiper را تغییر دادیم. همچنین فاصله بین آنها را 0 قرار دادیم. برای اینکه swipe احساس بی پایان داشته باشد، حلقه را روی true قرار می دهیم. همچنین نام کلاس دکمه های ناوبری خود را مشخص کردیم – این کار عملکردی را به دکمه ها اضافه می کند.
تمپلیت را اصلاح کنید تا ساختار زیر را داشته باشد:
<template>
<swiper :options=”swiperOptions”>
<swiper-slide>
<Movie image=”http://res.cloudinary.com/og-tech/image/upload/s–4NgMf3RF–/v1521804358/avengers.jpg” title=”Avengers : Infinity War” description=”Thanos is around” duration=”2hrs”/>
</swiper-slide>
[…]
<swiper-slide>
<Movie image=”http://res.cloudinary.com/og-tech/image/upload/s–qXaW5V3E–/v1521804426/wakanda.jpg” title=”Black Panther” description=”Wakanda Forever” duration=”2hrs15mins”/>
</swiper-slide>
<div class=”swiper-button-prev” slot=”button-prev”></div>
<div class=”swiper-button-next” slot=”button-next”></div>
</swiper>
</template>

برای دیدن نتایج به سرور مجازی خود مراجعه کنید.
نتیجه
در این مقاله ، شما swipers را در یک برنامه Vue پیاده سازی کرده اید. اکنون می توانید آنها را با سهولت در برنامه های کاربردی خود اجرا کنید.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade