نحوه تنظیم عنصر Swiper در یک برنامه React
چرخ فلک یا نوار لغزنده تصویر بخشی جدایی ناپذیر از بسیاری از برنامه های کاربردی وب هستند. آنها به شما کمک می کنند چندین عنصر را در یک نمای واحد گروه بندی کنید.
با استفاده از چرخ و فلک، می توانید اسلایدهای تصویر، اسلایدهای ویدئویی، اسلایدهای متنی، گالری های تصاویر تعاملی، کاتالوگ محصولات، پروفایل های تیم و موارد دیگر را پیاده سازی کنید.
Swiper.js دارای عملکردهای قدرتمندی است که ایجاد اجزای چرخ فلک کاربردی و قابل استفاده مجدد با جلوه ها و عملکرد خیره کننده را آسان می کند. میتوانید بزرگنمایی و کوچکنمایی تصاویر، اسکرول افقی و عمودی، جلوههای اسلاید اختلاف منظر و اسلایدهای حلقه بینهایت را فعال کنید، فقط به چند مورد اشاره میکنیم.
در این آموزش، ما بر روی نسخه جدید Swiper، 11.0.6، و عنصر Swiper جدید که برای ساخت اسلاید در Swiper.js توصیه می شود، تمرکز خواهیم کرد.
در پایان این راهنما، باید بتوانید عنصر Swiper جدید را از Swiper.js پیاده سازی کنید تا اسلایدهای پاسخگو و پویا با جلوه های از پیش ساخته شده در پروژه React خود ایجاد کنید.
فهرست مطالب
پارامترهای Swiper به عنوان ویژگی
نقاط شکست پاسخگو در عنصر Swiper
نحوه استایل دادن به عنصر Swiper
بازنشانی سبک های سفارشی Swiper
چگونه یک عنصر اسلایدر سفارشی بسازیم
پیش نیازها
قبل از شروع، باید دانش اولیه React.js را داشته باشید.
اگر نیاز به تجدید نظر دارید، میتوانید این کتابچه راهنمای React را برای مبتدیان تحلیل کنید.
Swiper.js چیست؟
Swiper یک کتابخانه جاوا اسکریپت مدرن و رایگان برای ساخت لغزنده های لمسی (Carousels) با تغییرات سخت افزاری و رفتارهای بومی شگفت انگیز است.
Swiper برای وبسایتهای تلفن همراه، برنامههای وب تلفن همراه و برنامههای بومی/هیبرید تلفن همراه ساخته شده است. Swiper همچنین با پشتیبانی و قابلیت های عالی برای وب سایت های دسکتاپ و برنامه های وب ارائه می شود.
از 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); }
کد شما باید در مرورگر شما دقیقاً شبیه این باشد:
را نشان می دهد" 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 می توانید همان کد را به صورت زیر بنویسید: 👇
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”
یک پارامتر با کلید فرعی (قابل کلیک) است که اکنون به عنوان یک ویژگی منفرد با یک مقدار نوشته شده است.
اگر کد بالا را اجرا کنید، باید همان نتیجه زیر را دریافت کنید:
از مرورگر به بیرون، ما توانسته ایم به جای نمای تک ستونی که قبلا داشتیم، نمای را به نمای سه ستونی تقسیم کنیم. ما توانستیم این کار را با استفاده از ویژگی 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
) برای صفحههای کوچک است.
وقتی کد شما روی مرورگر اجرا می شود باید به این شکل باشد:
به خاطر داشته باشید که نقاط شکست به محض سوار شدن کامپوننت ها پاسخ می دهند (یعنی 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 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
می توانید با تنظیم ویژگی 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> </> ) }
کد شما باید در مرورگر به شکل زیر باشد:
در اینجا، ویژگی های اثر مکعب را به صورت زیر اعمال می کنیم:
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
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-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 روش جدیدی برای ایجاد اسلایدر در Swiper.js از نسخه جدید 11.0.6 است.
در این آموزش نحوه ایجاد و پیاده سازی Swiper Custom Element جدید را در یک React Application توضیح دادم.
موارد استفاده Swiper.js مانند پیمایش، صفحهبندی، اسلایدها، جلوهها و ویژگیها را مشاهده کردید. همچنین یاد گرفتید که چگونه Swiper را از طرح پیشفرض سفارشی کنید تا سبک حرفهایتری به آن بدهید.
ممنون که خواندید!
ارسال نظر