نحوه تنظیم عنصر Swiper در یک برنامه React

شناسهٔ خبر: 451971 - تاریخ: فوریه 19, 2024

چرخ فلک یا نوار لغزنده تصویر بخشی جدایی ناپذیر از بسیاری از برنامه های کاربردی وب هستند. آنها به شما کمک می کنند چندین عنصر را در یک نمای واحد گروه بندی کنید.

با استفاده از چرخ و فلک، می توانید اسلایدهای تصویر، اسلایدهای ویدئویی، اسلایدهای متنی، گالری های تصاویر تعاملی، کاتالوگ محصولات، پروفایل های تیم و موارد دیگر را پیاده سازی کنید.

Swiper.js دارای عملکردهای قدرتمندی است که ایجاد اجزای چرخ فلک کاربردی و قابل استفاده مجدد با جلوه ها و عملکرد خیره کننده را آسان می کند. می‌توانید بزرگ‌نمایی و کوچک‌نمایی تصاویر، اسکرول افقی و عمودی، جلوه‌های اسلاید اختلاف منظر و اسلایدهای حلقه بی‌نهایت را فعال کنید، فقط به چند مورد اشاره می‌کنیم.

در این آموزش، ما بر روی نسخه جدید Swiper، 11.0.6، و عنصر Swiper جدید که برای ساخت اسلاید در Swiper.js توصیه می شود، تمرکز خواهیم کرد.

در پایان این راهنما، باید بتوانید عنصر Swiper جدید را از Swiper.js پیاده سازی کنید تا اسلایدهای پاسخگو و پویا با جلوه های از پیش ساخته شده در پروژه React خود ایجاد کنید.

فهرست مطالب

Swiper.js چیست؟

تاسیسات

نحوه راه اندازی Swiper

ماژول های گره

Swiper عناصر سفارشی از CDN

عناصر سفارشی Swiper

پارامترهای Swiper به عنوان ویژگی

نقاط شکست پاسخگو در عنصر Swiper

صفحه بندی و پیمایش

بارگذاری تنبل تصاویر

جلوه ها در عنصر Swiper

لغزنده های عمودی

نحوه استایل دادن به عنصر Swiper

بازنشانی سبک های سفارشی Swiper

یک نام کلاس جدید ایجاد کنید

چگونه یک عنصر اسلایدر سفارشی بسازیم

خلاصه

منابع

پیش نیازها

قبل از شروع، باید دانش اولیه React.js را داشته باشید.

اگر نیاز به تجدید نظر دارید، می‌توانید این کتابچه راهنمای React را برای مبتدیان تحلیل کنید.

Swiper.js چیست؟

Swiper یک کتابخانه جاوا اسکریپت مدرن و رایگان برای ساخت لغزنده های لمسی (Carousels) با تغییرات سخت افزاری و رفتارهای بومی شگفت انگیز است.

Swiper برای وب‌سایت‌های تلفن همراه، برنامه‌های وب تلفن همراه و برنامه‌های بومی/هیبرید تلفن همراه ساخته شده است. Swiper همچنین با پشتیبانی و قابلیت های عالی برای وب سایت های دسکتاپ و برنامه های وب ارائه می شود.

مهاجرت <a href= از Swiper React Component به Swiper Element Guide" width="770" height="170" loading="lazy">

در زمان نگارش، Swiper v11.0.6 توصیه می‌کند به جای Swiper React Components به Swiper Element مهاجرت کنید، که احتمالاً در نسخه‌های بعدی حذف خواهد شد. در این آموزش، ما بر روی Swiper Element و موارد استفاده از آن تمرکز خواهیم کرد.

تاسیسات

برای شروع، مقداری کد React boilerplate را با Vite.js ایجاد کنید. سپس، به دایرکتوری پروژه در ترمینال خود بروید و دستور زیر را برای نصب Swiper.js تایپ کنید:

 npm i swiper

سپس دستور زیر را تایپ کنید تا کد React.js boilerplate خود را اجرا کنید:

 npm run dev

روی URL پورت در ترمینال کلیک کنید تا کد React boilerplate شما در مرورگر باز شود.

نحوه راه اندازی Swiper

برای استفاده از Swiper در پروژه React می توانید از روش های زیر استفاده کنید.

ماژول های گره

اگر Swiper را از طریق npm i swiper نصب کردید، سپس عنصر سفارشی را از node_modules import و آن را ثبت کنید.

 ├─ main.jsx // import function to register Swiper custom elements import { register } from 'swiper/element/bundle'; // register Swiper custom elements register();

این باید یک بار مستقیماً روی فایل main.jsx انجام شود تا به صورت سراسری نصب شود.

Swiper عناصر سفارشی از CDN

برای فعال کردن Swiper Element، پیوند CDN را همانطور که در زیر نشان داده شده است در تگ اسکریپت قرار دهید:

 ├─ index.html <head> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script> </head>

این کار را یکبار مستقیماً روی فایل index.html انجام دهید تا به صورت سراسری فعال شود.

عناصر سفارشی Swiper

اگر با موفقیت Element Swiper را راه اندازی کرده اید، متد register() را فراخوانی کنید. برای ایجاد یک نوار لغزنده، باید از <swiper-container> و <swiper-slide> از Swiper.js استفاده کنید.

 export default function Usage() { return ( <> <main> <swiper-container> <swiper-slide>Slide1</swiper-slide> <swiper-slide>Slide2</swiper-slide> <swiper-slide>Slide3</swiper-slide> <swiper-slide>Slide4</swiper-slide> <swiper-slide>Slide5</swiper-slide> </swiper-container> </main> </> ) }

کد بالا نحوه ساخت اسلایدها را با استفاده از Swiper Custom Elements نشان می دهد.

<swiper-container> : این عنصر والد است که به عنوان محفظه ای برای عنصر سفارشی <swiper-slide> و سایر عناصر HTML که اسلایدها را تشکیل می دهند عمل می کند. هر عنصری که در داخل عنصر سفارشی <swiper-container> تو در تو باشد به عنوان یک اسلاید تلقی می شود.

<swiper-slide> : این فرزند مستقیم <swiper-container> عنصر سفارشی است. <swiper-slide> به عنوان اسلاید مجزای اجزای لغزنده عمل می کند.

برای وضوح، چند سبک CSS سفارشی اضافه کرده‌ام تا از نظر بصری جذاب و قابل درک باشد. کد زیر را کپی کنید: 👇

 *,*::before, *::after { margin: 0; padding: 0; box-sizing: border-box; font-family: calibri; } body { display: flex; justify-content: center; } swiper-container { width: 800px; height: 200px; line-height: 200px; text-align: center; } swiper-slide { background-color: rgb(4 47 46); color: #fff; font-size: 25px; } swiper-slide:nth-child(2) { background-color: rgb(15 118 110); } swiper-slide:nth-child(3) { background-color: rgb(45 212 191); } swiper-slide:nth-child(4) { background-color: rgb(153 246 228); } swiper-slide:nth-child(5) { background-color: rgb(34 197 94); }

کد شما باید در مرورگر شما دقیقاً شبیه این باشد:

اسلاید اسلایدر ایجاد شده با عنصر Swiper <a href= را نشان می دهد" width="1366" height="720" loading="lazy">

پارامترهای Swiper به عنوان ویژگی

پارامترها در Swiper عبارتند از کلید و مقدار یا کلید ، کلید فرعی و جفت مقدار همانطور که در زیر نشان داده شده است.

 const swiper = new Swiper('.swiper', { scrollbar: { el: '.swiper-scrollbar', draggable: true, }, mousewheel: { invert: true, }, slidesPerView: 3, spaceBetween: 20, scrollbar: { clickable: true, });

اگر مستقیماً روی فایل index.html کار کنیم و از کلاس‌های swiper و swiper-slide روی عناصر div استفاده کنیم، کد بالا معتبر است.

برای Swiper Custom Elements می توانید همان کد را به صورت زیر بنویسید: 👇

بیشتر بخوانید

Earlybird Health صندوق دوم دو برابر بزرگتر را می بندد، چک های بزرگتر می نویسد

 export default function Usage() { return ( <> <main> 👉 <swiper-container slides-per-view="3" space-between="20" scrollbar-clickable="true" mousewheel-invert="true"> <swiper-slide>Slide1</swiper-slide> <swiper-slide>Slide2</swiper-slide> <swiper-slide>Slide3</swiper-slide> <swiper-slide>Slide4</swiper-slide> <swiper-slide>Slide5</swiper-slide> </swiper-container> </main> </> ) }

تمام پارامترهای Swiper به شکل آپشن های kebab-case روی عناصر سفارشی <swiper-container> نوشته شده‌اند.

پارامترهای دارای کلیدهای فرعی و مقادیر به صورت یک ویژگی و مقدار منفرد نوشته می شوند. به عنوان مثال، scrollbar-clickable=”true” یک پارامتر با کلید فرعی (قابل کلیک) است که اکنون به عنوان یک ویژگی منفرد با یک مقدار نوشته شده است.

اگر کد بالا را اجرا کنید، باید همان نتیجه زیر را دریافت کنید:

لغزنده های swiper.js با نمای سه ستونی

از مرورگر به بیرون، ما توانسته ایم به جای نمای تک ستونی که قبلا داشتیم، نمای را به نمای سه ستونی تقسیم کنیم. ما توانستیم این کار را با استفاده از ویژگی slide-per-view تجزیه شده به <swiper-container> Custom Element انجام دهیم. برای فهرست کامل پارامترهای موجود، به APIهای Swiper مراجعه کنید.

نقاط شکست پاسخگو در عنصر Swiper

Swiper Custom Element به آپشن های ی برای تجزیه اشیاء پارامتر نیاز دارد. در مواردی که خصوصیات شی پیچیده در مورد نقاط شکست مورد نیاز است، می‌توانیم از JSON.stringify() برای تبدیل اشیا به رشته‌ها استفاده کنیم و آپشن های شی نقطه‌های شکست را برای <swiper-container> قابل خواندن کنیم.

مثال کد زیر را در نظر بگیرید:

 export default function Usage() { return ( <> <main> <swiper-container breakpoints={ JSON.stringify({ 640:{ slidesPerView: 1, spaceBetween: 20, }, 768: { slidesPerView: 3, spaceBetween: 40, }, 1024: { slidesPerView: 4, spaceBetween: 50, } }) }> <swiper-slide>Slide1</swiper-slide> <swiper-slide>Slide2</swiper-slide> <swiper-slide>Slide3</swiper-slide> <swiper-slide>Slide4</swiper-slide> <swiper-slide>Slide5</swiper-slide> <swiper-slide>Slide6</swiper-slide> <swiper-slide>Slide7</swiper-slide> <swiper-slide>Slide8</swiper-slide> <swiper-slide>Slide9</swiper-slide> </swiper-container> </main> </> ) }

در اینجا، ما سه نقطه شکست مختلف 640 ، 768 ، و 1024 را به ترتیب برای سه اندازه مختلف صفحه نمایش (پرسش‌های رسانه) اضافه می‌کنیم، که در آن 640 به معنای ( max-width:640px ) برای صفحه‌های کوچک است.

وقتی کد شما روی مرورگر اجرا می شود باید به این شکل باشد:

نقاط شکست پاسخگو با عنصر Swiper

به خاطر داشته باشید که نقاط شکست به محض سوار شدن کامپوننت ها پاسخ می دهند (یعنی React کامپوننت ها را برای اولین بار رندر می کند). پس اگر در حین یادگیری این مورد، اندازه مرورگر دسکتاپ خود را تغییر دادید، باید کل صفحه را با کلیک بر روی نماد بارگذاری مجدد مجدد بارگیری کنید تا تغییرات نقاط شکست را مشاهده کنید.

صفحه بندی و پیمایش

Swiper دارای پارامترهای navigation و pagination برای گفت ن کنترل‌ها به لغزنده است. با navigation ، می‌توانید از اسلاید فعلی به اسلاید قبلی یا بعدی بروید، در حالی که با pagination می‌توانید به یک اسلاید خاص در ظرف اسلایدر بروید.

برای فعال کردن این مورد در عنصر سفارشی swiper، هر پارامتر را به عنوان یک ویژگی در <swiper-container> با مقدار true اعمال کنید.

 export default function Usage() { return ( <> <main> <swiper-container space-between="10" slides-per-view="3" pagination="true" navigation="true" > <swiper-slide>Slide1</swiper-slide> <swiper-slide>Slide2</swiper-slide> <swiper-slide>Slide3</swiper-slide> <swiper-slide>Slide4</swiper-slide> <swiper-slide>Slide5</swiper-slide> </swiper-container> </main> </> ) }

کد شما باید دقیقاً در مرورگر به شکل زیر باشد:

صفحه بندی و پیمایش در Swiper Element

برای جابجایی اسلایدها، روی پیکان پیمایش یا نقاط گلوله صفحه بندی کلیک کنید.

بارگذاری تنبل تصاویر

می‌توانیم بارگذاری تنبل را روی نوار لغزنده‌های تصویر در Swiper Custom Elements پیاده‌سازی کنیم. lazy=”true” و loading=”lazy” به ترتیب در تگ <swiper-slide> و <img /> به عنوان ویژگی اعمال کنید.

 export default function Usage() { return ( <> <main> <swiper-container style={ { "--swiper-navigation-color": "#fff", "--swiper-pagination-color": "#fff" } } pagination-clickable="true" navigation="true" className="mySwiper"> <swiper-slide lazy="true"> <img src="https://source.unsplash.com/slightly-opened-silver-macbook-mP7aPSUm7aE" loading="lazy" alt="" /> </swiper-slide> <swiper-slide lazy="true"> <img loading="lazy" src="https://source.unsplash.com/macbook-y0_vFxOHayg" alt="" /> </swiper-slide> <swiper-slide lazy="true"> <img loading="lazy" src="https://source.unsplash.com/black-macbook-near-black-iphone-7-plus-and-black-apple-watch-HY3l4IeOc3E" alt="" /> </swiper-slide> <swiper-slide lazy="true"> <img loading="lazy" src="https://source.unsplash.com/apple-products-on-table-tdMu8W9NTnY" alt="" /> </swiper-slide> <swiper-slide lazy="true"> <img loading="lazy" src="https://source.unsplash.com/turned-on-ipad-Im8ylpB8SpI" alt="" /> </swiper-slide> </swiper-container> </main> </> ) }

برای اجرای بارگذاری تنبل روی تصاویر، زمانی که lazy="true" روی عنصر تنظیم شده باشد، باید عنصر پیش بارگذاری کننده تنبل به هر اسلاید در مؤلفه <swiper-slide> اضافه شود.

من چند سبک CSS اضافه کردم تا همه چیز را کمی تمیز کنیم، پس می توانید کد زیر را کپی کنید:

دیگر اخبار

قیمت گوشت قرمز اعلام شد/کاهش قیمت گوشت مرغ

 *,*::before, *::after { margin: 0; padding: 0; box-sizing: border-box; font-family: calibri; } body { display: flex; justify-content: center; } swiper-container { width: 800px; height: 400px; } swiper-slide { width: 100%; height: 100%; } swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

زمانی که آن را در مرورگر اجرا می کنید، کد شما باید به این شکل باشد:

بارگذاری تنبل تصاویر در Swiper Element

جلوه ها در عنصر Swiper

می توانید با تنظیم ویژگی effect بر روی مقدار دلخواه مورد نیاز پروژه خود، افکت ها را در Swiper Element اضافه کنید. به عنوان مثال، ما یک افکت cube را برای ایجاد یک صفحه نمایش اسلاید سه بعدی اجرا کردیم.

 export default function Usage() { return ( <> <main> <swiper-container style={ { "--swiper-navigation-color": "#fff", "--swiper-pagination-color": "#fff" } } pagination-clickable="true" navigation="true" effect="cube" grab-cursor="true" cube-effect-shadow="true" cube-effect-slide-shadows="true" cube-effect-shadow-offset="20" cube-effect-shadow-scale="0.94" className="mySwiper"> <swiper-slide > <img src="https://source.unsplash.com/slightly-opened-silver-macbook-mP7aPSUm7aE" alt="" /> </swiper-slide> <swiper-slide> <img src="https://source.unsplash.com/macbook-y0_vFxOHayg" alt="" /> </swiper-slide> <swiper-slide> <img src="https://source.unsplash.com/black-macbook-near-black-iphone-7-plus-and-black-apple-watch-HY3l4IeOc3E" alt="" /> </swiper-slide> <swiper-slide> <img src="https://source.unsplash.com/apple-products-on-table-tdMu8W9NTnY" alt="" /> </swiper-slide> <swiper-slide> <img src="https://source.unsplash.com/turned-on-ipad-Im8ylpB8SpI" alt="" /> </swiper-slide> </swiper-container> </main> </> ) }

کد شما باید در مرورگر به شکل زیر باشد:

افکت مکعب در Swiper Element

در اینجا، ویژگی های اثر مکعب را به صورت زیر اعمال می کنیم:

effect=”cube”: نوار لغزنده را روی یک مکعب تنظیم می کند

grab-cursor=”true”: مکان نما را به یک نماد قابل گرفتن تغییر می دهد.

cube-effect-shadow=”true” : سایه را روی مولفه اصلی اسلاید تنظیم می کند

cube-effect-slide-shadows=”true”: سایه را روی عنصر اسلاید تنظیم می کند

cube-effect-shadow-offset=”true” : جهت افست سایه را تنظیم می کند

cube-effect-shadow-scale : اندازه سایه را تنظیم می کند

به غیر از افکت مکعب، می‌توانید مقادیر دیگری را که می‌توانید در فهرست Swiper API اینجا پیدا کنید، مشخص کنید.

لغزنده های عمودی

برای اعمال اسلایدهای عمودی، کافی است ویژگی direction="vertical” را در <swiper-component> اعمال کنید، همانطور که در کد زیر مشاهده می کنید:

 export default function Usage() { return ( <> <main> <swiper-container style={ { "--swiper-navigation-color": "#fff", "--swiper-pagination-color": "#fff" } } pagination-clickable="true" navigation="true" direction="vertical" className="mySwiper"> <swiper-slide > <img src="https://source.unsplash.com/slightly-opened-silver-macbook-mP7aPSUm7aE" alt="" /> </swiper-slide> <swiper-slide> <img src="https://source.unsplash.com/macbook-y0_vFxOHayg" alt="" /> </swiper-slide> <swiper-slide> <img src="https://source.unsplash.com/black-macbook-near-black-iphone-7-plus-and-black-apple-watch-HY3l4IeOc3E" alt="" /> </swiper-slide> </swiper-container> </main> </> ) }

وقتی کد شما روی مرورگر اجرا می شود باید به این شکل باشد:

اسلایدهای عمودی در Swiper Element

نحوه استایل دادن به عنصر Swiper

Styling Element Swiper بسیار ساده است. Swiper دارای تعداد زیادی کلاس از پیش ساخته است که برای پارامترهای Swiper (ویژگی‌ها در عناصر سفارشی Swiper) اعمال می‌شوند. می‌توانیم قوانین سبک پیش‌فرض را روی این کلاس‌ها با ویژگی style HTML یا قوانین CSS خارجی بازنویسی کنیم.

Swiper Custom Elements را می‌توان به دو روش استایل‌بندی کرد: می‌توانید سبک‌های پیش‌فرض را در Swiper Custom Elements و کلاس‌های CSS سفارشی بازنشانی کنید، یا یک نام کلاس جدید در Swiper Element ایجاد کنید و به آن استایل دهید.

بازنشانی سبک های سفارشی Swiper

برای بازنشانی سبک‌های عنصر سفارشی Swiper، عناصر یا کلاس‌های سفارشی Swiper را که سبک‌های پیش‌فرض روی آن‌ها اعمال می‌شوند، هدف قرار دهید و آنها را به سبک‌های دلخواه خود تغییر دهید.

 export default function Usage() { return ( <> <main> <swiper-container style={ { "--swiper-navigation-color": "#fff", "--swiper-pagination-color": "#fff" } } pagination-clickable="true" navigation="true" className="mySwiper"> <swiper-slide > <img src="https://source.unsplash.com/slightly-opened-silver-macbook-mP7aPSUm7aE" alt="" /> </swiper-slide> <swiper-slide> <img src="https://source.unsplash.com/macbook-y0_vFxOHayg" alt="" /> </swiper-slide> <swiper-slide> <img src="https://source.unsplash.com/black-macbook-near-black-iphone-7-plus-and-black-apple-watch-HY3l4IeOc3E" alt="" /> </swiper-slide> </swiper-container> </main> </> ) }

از نمونه کد بالا، --swiper-navigation-color و --swiper-pagination-color روی رنگ #fff تنظیم شده اند تا رنگ های پیش فرض دکمه های پیمایش و صفحه بندی را از رنگ آبی روشن #007aff تغییر دهند. بسته به چیزی که روی آن کار می‌کنید، می‌توانید با استفاده از کلاس‌های سفارشی دیگر از APIهای Swiper این را بیشتر سفارشی کنید.

علاوه بر این، <swiper-container> و <swiper-slide> به صورت زیر استایل بندی می شوند:

 *,*::before, *::after { margin: 0; padding: 0; box-sizing: border-box; font-family: calibri; } body { display: flex; justify-content: center; } swiper-container { width: 800px; height: 400px; } swiper-slide { width: 100%; height: 100%; } swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

از نمونه کد بالا، swiper-container روی width: 800px و height: 400px تنظیم شده است تا width و height معینی به swiper-container بدهد. swiper-slide روی 100% در width و height تنظیم شده است تا ذاتاً هر عنصر فرزند swiper-slide به اندازه پیش‌فرض swiper-container تنظیم شود.

همچنین swiper-container دارای مجموعه width و height خاصی نیست. این باعث می‌شود که اندازه پیش‌فرض محتوای داخل swiper-slide را بگیرد.

همچنین، توجه داشته باشید که swiper-container و swiper-slide به عنوان یک عنصر واقعی HTML بدون نقطه ( . ) برای کلاس یا علامت هش ( # ) برای شناسه استایل بندی شده اند.

زمانی که کد شما در مرورگر خود اجرا می کنید باید به شکل زیر باشد:

عنصر و کلاس های سفارشی Swiper Styling

یک نام کلاس جدید ایجاد کنید

گاهی اوقات، یک صفحه می‌تواند حاوی چندین <swiper-container> باشد که مشکلات مختلفی را حل می‌کند و هر کدام ممکن است به سبک‌های خاص خود نیاز داشته باشند. ایجاد یک نام کلاس جدید ممکن است برای ارائه گزینه های مختلف استایل بسیار مفید باشد.

 <swiper-container className="image-swiper" > <swiper-slide > <img src="https://source.unsplash.com/slightly-opened-silver-macbook-mP7aPSUm7aE" alt="" /> </swiper-slide> <swiper-slide> <img src="https://source.unsplash.com/macbook-y0_vFxOHayg" alt="" /> </swiper-slide> </swiper-container>

کلاس image-swiper نشان می دهد که عنصر Swiper یک نوار لغزنده تصویر است.

چگونه یک عنصر اسلایدر سفارشی بسازیم

Swiper دارای کنترل‌های پیش‌فرض مانند پیمایش و صفحه‌بندی است که کنترل اسلایدها را در swiper-container آسان می‌کند. پیمایش و صفحه‌بندی با برخی از نمادهای پیش‌فرض برای تعامل با کاربر همراه است.

به عنوان مثال، شما آیکون های زاویه چپ و راست را برای ناوبری و آیکون های گلوله کوچک برای صفحه بندی دارید. اما بر اساس نیازهای طراحی یا رابط کاربری شما برای یک وب سایت یا برنامه خاص، ممکن است نیاز به تغییر داشته باشد.

در زیر یک راه ساده برای پیاده سازی SVG های سفارشی به عنوان نمادهای ناوبری و سفارشی کردن صفحه بندی برای تعامل بهتر با کاربر وجود دارد.

 export default function Usage() { return ( <> <main className="slider-main-container"> <swiper-container navigation-next-el=".custom-next-button" navigation-prev-el=".custom-prev-button" pagination-clickable="true" pagination-dynamic-bullets="true" autoplay-delay="2000" autoplay-disable-on-interaction="false" center-slides="true" style={ { "--swiper-pagination-color": "#fff", "--swiper-pagination-bullet-size": "15px", } } > <swiper-slide> <img src="https://source.unsplash.com/white-lamborghini-aventador-parked-in-building-7_OQMgoGzDw" alt="" /> </swiper-slide> <swiper-slide> <img src="https://source.unsplash.com/shallow-focus-photo-of-white-sedan-oN661Kw9ZOY" alt="" /> </swiper-slide> <swiper-slide> <img src="https://source.unsplash.com/black-car-interior-4xM5cytsdMo" alt="" /> </swiper-slide> <swiper-slide> <img src="https://source.unsplash.com/turned-on-monitor-inside-vehicle-tU-L__PI7gw" alt="" /> </swiper-slide> <swiper-slide> <img src="https://source.unsplash.com/black-and-blue-vacuum-cleaner-rHfTdK9YU2Q" alt="" /> </swiper-slide> {/* Navigations */} </swiper-container> <div className="nav-btn custom-prev-button"> {/* <!-- https://feathericons.dev/?search=arrow-left&iconset=feather --> */} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" className="main-grid-item-icon" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"> <line x1="19" x2="5" y1="12" y2="12" /> <polyline points="12 19 5 12 12 5" /> </svg> </div> <div className="nav-btn custom-next-button"> {/* <!-- https://feathericons.dev/?search=arrow-right&iconset=feather --> */} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" className="main-grid-item-icon" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"> <line x1="5" x2="19" y1="12" y2="12" /> <polyline points="12 5 19 12 12 19" /> </svg> </div> </main> </> ) }

در اینجا چیزی است که در کد بالا وجود دارد:

navigation-next-el=".custom-next-button" : برای تعیین عنصر سفارشی برای نماد پیمایش بعدی استفاده می شود.

navigation-prev-el=".custom-prev-button" : برای تعیین عنصر سفارشی برای نماد پیمایش قبلی استفاده می شود.

pagination-clickable="true" : صفحه بندی را فعال می کند و روی یک دکمه قابل کلیک تنظیم می کند.

pagination-dynamic-bullets="true" : برای تغییر نمایش طراحی دکمه صفحه بندی استفاده می شود.

autoplay-delay="2000" : اسلایدها را قادر می سازد تا به طور خودکار خود را پخش و تکرار کنند.

center-slides="true" : اسلاید فعال را در مرکز قرار می دهد.

نمادهای SVG خارج از عنصر swiper-container اعلام می‌شوند تا از بریده شدن آن به اسلاید اول جلوگیری شود. تگ <main> روی یک کلاس از slider-wrapper تنظیم شده است تا هم عناصر لغزنده سفارشی و هم نمادهای SVGهای سفارشی را بپیچد.

من مقداری CSS برای استایل اضافه کردم. می توانید آن را در اینجا کپی کنید.

 *,*::before, *::after { margin: 0; padding: 0; box-sizing: border-box; font-family: calibri; } body { display: flex; justify-content: center; } swiper-container { width: 800px; height: 400px; } .slider-main-container { position: relative; } swiper-slide { width: 100%; height: 100%; } swiper-slide img { width: 100%; height: 100%; object-fit: cover; } .nav-btn { display: block; position: absolute; z-index: 20; user-select: none; -webkit-user-select: none; background-color: rgba(0, 0, 0, 0.3); cursor: pointer; padding: 2px; border-radius: 5px; transition: background 0.5s ease; } .nav-btn:hover { background-color: rgb(255, 165, 0); } .nav-btn.custom-prev-button { top: 50%; left: 2em; } .nav-btn.custom-next-button { right: 2em; top: 50%; }

زمانی که آن را در مرورگر اجرا می کنید، کد شما باید به این شکل باشد:

شخصی سازی Swiper Element در React

خلاصه

Swiper Element روش جدیدی برای ایجاد اسلایدر در Swiper.js از نسخه جدید 11.0.6 است.

در این آموزش نحوه ایجاد و پیاده سازی Swiper Custom Element جدید را در یک React Application توضیح دادم.

موارد استفاده Swiper.js مانند پیمایش، صفحه‌بندی، اسلایدها، جلوه‌ها و ویژگی‌ها را مشاهده کردید. همچنین یاد گرفتید که چگونه Swiper را از طرح پیش‌فرض سفارشی کنید تا سبک حرفه‌ای‌تری به آن بدهید.

ممنون که خواندید!