در بسیاری از قالب‌های وردپرس، نیاز به نمایش چند اسلایدر در یک صفحه وجود دارد. این موضوع در صفحات اصلی، لندینگ‌ها و بخش‌های سفارشی قالب رایج است. کتابخانه Splide یک ابزار سبک و قابل‌اعتماد برای ساخت اسلایدر است. در این مقاله یاد می‌گیرید چگونه چند اسلایدر Splide در یک صفحه را بدون تداخل و با ساختار درست، پیاده‌سازی کنید.
فهرست مطالب
وارد کردن فایل‌های CSS و جاوا اسکریپت کتابخانه اسپلاید
روش‌های مختلفی برای گنجاندن آنها در پروژه شما وجود دارد. من ترجیح می‌دهم آنها را از طریق CDN وارد کنم. در این مثال، از Splide نسخه 4.1.4 استفاده خواهد شد.
کد فایل CSS باید بین <head> و </head> درون کدهای HTML شما قرار گیرد:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">کد فایل جاوا اسکریپ را قبل از </body> درون کدهای HTML خود اضافه کنید:
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>اضافه کردن چند اسلایدر Splide در یک صفحه HTML
می‌توانید یکی از کدهای از پیش ساخته شده Splide را بردارید و در فایل HTML پروژه خود قرار دهید. نکته کلیدی این است که یک ویژگی id به کد هر اسلایدر اضافه کنید.
توجه داشته باشید که در نمونه زیر، کد مربوط به اسلایدر اول را همراه با id="first-slider" و کد مربوط به اسلایدر دوم را همراه با id="second-slider" نوشتم.
<!-- First slider codes -->
<section class="splide" id="first-slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">اسلاید اول</li>
<li class="splide__slide">اسلاید دوم</li>
<li class="splide__slide">اسلاید سوم</li>
</ul>
</div>
</section>
<!-- Second slider codes -->
<section class="splide" id="second-slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">اسلاید اول</li>
<li class="splide__slide">اسلاید دوم</li>
<li class="splide__slide">اسلاید سوم</li>
</ul>
</div>
</section>اجرای چند اسلایدر Splide در یک صفحه با جاوا اسکریپت
برای انجام این کار، از یک تگ اسکریپت مانند نمونه زیر استفاده کنید. در قطعه کد زیر، از مقادیر ویژگی id که قبلاً به کدهای HTML اسلایدرها اضافه شده بودند، استفاده کردم. این کدها را در انتهای کدهای HTML خود قبل از </body> اضافه کنید:
<script>
new Splide("#first-slider").mount();
new Splide("#second-slider").mount();
</script>نمونه کد کامل چند اسلایدر Splide در یک صفحه
این نمونه کد نهایی است که می‌توان در یک فایل .html قرار داد. من فقط چند خط کد CSS سفارشی برای نمایش بهتر دو اسلایدر اضافه کردم. می‌توانید روی این لینک که نسخه آنلاین کد زیر است، کلیک کنید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
<title>چند اسلایدر Splide در یک صفحه بدون تداخل</title>
<style>
section {
margin: 2rem;
}
.splide__slide {
background-color: tomato;
padding: 6rem 2rem;
text-align: center;
font-size: 2rem;
}
#second-slider .splide__slide {
background-color: BlueViolet;
}
</style>
</head>
<body>
<!-- First slider codes -->
<section class="splide" id="first-slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">اسلاید اول</li>
<li class="splide__slide">اسلاید دوم</li>
<li class="splide__slide">اسلاید سوم</li>
</ul>
</div>
</section>
<!-- Second slider codes -->
<section class="splide" id="second-slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">اسلاید اول</li>
<li class="splide__slide">اسلاید دوم</li>
<li class="splide__slide">اسلاید سوم</li>
</ul>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<script>
new Splide("#first-slider").mount();
new Splide("#second-slider").mount();
</script>
</body>
</html>نتیجه‌گیری
در این مقاله روش اجرای چند اسلایدر Splide در یک صفحه بررسی شد. این روش برای توسعه قالب وردپرس و سفارشی‌سازی رابط کاربری بسیار کاربردی است. با رعایت ساختار HTML و مقداردهی درست در جاوااسکریپت، می‌توان اسلایدرهای مستقل و بدون مشکل ایجاد کرد. این الگو در پروژه‌های وردپرسی مختلف قابل استفاده است.
دیدگاهتان را بنویسید