در دنیای وب، اولین تأثیرگذاری حرف اول را می‌زند. وب‌سایت شما تنها چند ثانیه فرصت دارد تا توجه مخاطب را جلب کند و او را به گشت‌وگذار ترغیب نماید. یکی از روش‌های مؤثر برای تحت تأثیر قرار دادن بازدیدکنندگان در همان نگاه اول، استفاده از اسلایدرهای تصویر است. این اسلایدرها به شما امکان می‌دهند تا چندین تصویر زیبا و گیرا را به‌صورت چرخشی نمایش دهید و به‌این‌ترتیب، داستان وب‌سایت خود را به بهترین شکل روایت کنید. آموزش ساخت اسلایدر با جاوا اسکریپت آسان‌تر از آن چیزی است که شما فکرش را می‌کنید.
در این مقاله آموزشی جامع، قصد داریم به شما نحوه ساخت اسلایدر تصویر با استفاده از سه رکن اصلی وب یعنی HTML ،CSS و جاوا اسکریپت را آموزش دهیم. پس اگر دوست دارید وب‌سایت خود را پویاتر و جذاب‌تر از همیشه کنید، با ما همراه باشید!
اسلایدر تصویر چیست؟
اسلایدر تصویر (Image Slider) یا چرخاننده تصویر (Image Carousel)، روشی کارآمد برای نمایش چندین تصویر به‌صورت متوالی در یک وب‌سایت است. این تصاویر با جلوه‌های مختلفی مانند اسلاید شدن، محو شدن یا حرکت به طرفین، جابجا می‌شوند و توجه مخاطب را به خود جلب می‌کنند.
استفاده از تصاویر زیبا و گیرا در اسلایدر می‌تواند به طور چشمگیری در جذب بازدیدکننده و بالا بردن نرخ تعامل (Engagement Rate) وب‌سایت شما مؤثر باشد. تصور کنید که مخاطب وارد وب‌سایتی می‌شود و با اسلایدر جذابی روبرو می‌شود که محصولات جدید، تخفیفات ویژه یا تصاویر با کیفیتی از خدمات شما را به نمایش می‌گذارد. به طور قطع، احتمال اینکه کاربر برای مدت‌زمان بیشتری در وب‌سایت شما باقی بماند و به دیگر بخش‌ها سر بزند، افزایش پیدا می‌کند. در ادامه این مطلب از آموزش ساخت اسلایدر با جاوا اسکریپت، اهمیت این موضوع را بررسی خواهیم کرد.
چرا باید از اسلایدر تصویر استفاده کنیم؟
دلایل متعددی وجود دارد که استفاده از اسلایدر تصویر را به یک انتخاب هوشمندانه برای وب‌سایت شما تبدیل می‌کند.
در ادامه به برخی از مهم‌ترین این دلایل اشاره می‌کنیم:
- جلب‌توجه مخاطب: همان‌طور که پیش‌تر اشاره شد، اسلایدر تصویر می‌تواند در همان نگاه اول، توجه مخاطب را به خود جلب کند. تصاویر متحرک و باکیفیت، به طور طبیعی چشم کاربر را به خود خیره می‌سازند و او را ترغیب می‌کنند تا در وب‌سایت شما بیشتر کاوش کند.
- بهبود تجربه کاربری: اسلایدر تصویر می‌تواند به بهبود تجربه کاربری (User Experience) در وب‌سایت شما کمک کند. با استفاده از این ابزار، می‌توانید به‌راحتی چندین تصویر یا اطلاعات مهم را در یک فضای نسبتاً کوچک نمایش دهید. این امر باعث می‌شود تا کاربر بدون نیاز به اسکرول کردن صفحه (Scrolling) به پایین، به محتوای موردنظر خود دسترسی پیدا کند.
- برجسته‌سازی محتوای کلیدی: اسلایدر تصویر به شما این امکان را می‌دهد تا بر روی محتوای کلیدی وب‌سایت خود، مانند محصولات جدید، مقالات پربازدید، رویدادهای آتی و غیره، تأکید ویژه‌ای داشته باشید. با برجسته‌سازی این محتوا در اسلایدر، شانس دیده شدن آن‌ها توسط مخاطب را به میزان قابل‌توجهی افزایش می‌دهید.
- ایجاد وب‌سایتی پویاتر: استفاده از اسلایدر تصویر، وب‌سایت شما را از حالت ایستا خارج کرده و به آن پویایی و تحرک می‌بخشد. این تحرک و پویایی می‌تواند حس خوشایندی را به مخاطب القا کند و او را برای مدت‌زمان بیشتری در وب‌سایت شما نگه دارد.
- سازگاری با دستگاه‌های مختلف: اسلایدرهای تصویر به‌گونه‌ای طراحی می‌شوند که در تمامی دستگاه‌ها، از جمله کامپیوترهای رومیزی، تبلت‌ها و تلفن‌های همراه، به‌درستی نمایش داده شوند. این امر باعث می‌شود تا مخاطبان شما با هر نوع وسیله‌ای که در اختیار دارند، بتوانند به‌راحتی از وب‌سایت شما استفاده نمایند.
در ادامه این مطلب با آموزش ساخت اسلایدر با جاوا اسکریپت با شما همراه هستیم.
مراحل و آموزش ساخت اسلایدر با جاوا اسکریپت
اکنون‌که با اهمیت و مزایای استفاده از اسلایدر تصویر آشنا شدیم، نوبت آن رسیده است که به سراغ ساخت این اسلایدر با استفاده از جاوا اسکریپت برویم. مراحل ساخت این اسلایدر را به‌صورت گام‌به‌گام دنبال کنید.
آماده‌سازی فایل‌ها در آموزش ساخت اسلایدر با جاوا اسکریپت
برای شروع کار، سه فایل مجزا با پسوندهای HTML، CSS و جاوا اسکریپت ایجاد کنید. در این فایل‌ها، کدهای مربوط به ساخت و نمایش اسلایدر تصویر را خواهیم نوشت.
پیشنهاد مطالعه: آموزش جاوا اسکریپت سیاه – راهنمای ساده و مختصر
ایجاد ساختار اصلی اسلایدر
در فایل HTML از آموزش ساخت اسلایدر با جاوا اسکریپت، کدهای زیر را قرار دهید:
<!DOCTYPE html><html><body> <!--HTML Code--> <!-- Slideshow Container Div --> <div class="container"> <!-- Full-width images with caption text --> <div class="image-sliderfade fade"> <img src="img1.jpg" style="width: 100%" /> <div class="text">Image caption 1</div> </div> <div class="image-sliderfade fade"> <img src="img2.jpg" style="width: 100%" /> <div class="text">Image caption 2</div> </div> <div class="image-sliderfade fade"> <img src="img3.jpg" style="width: 100%" /> <div class="text">Image caption 3</div> </div> <div class="image-sliderfade fade"> <img src="img3.jpg" style="width: 100%" /> <div class="text">Image caption 4</div> </div> </div> <br /> <!-- The dots/circles --> <div style="text-align: center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div></body></html>این کد اسکلت‌بندی اولیه یک اسلایدر تصویر را با HTML ایجاد می‌کند اما فعلاً کارایی خاصی ندارد. بیایید نگاه دقیق‌تری به آن بیندازیم:
- ساختار HTML:
- مشخصات کلی صفحه مثل نوع سند، زبان، کدینگ متن، اندازه صفحه نمایش روی دستگاه‌های مختلف و عنوان صفحه را تعریف می‌کند.
- یک فایل CSS خارجی را برای استایل دهی به صفحه لینک می‌کند.
- یک بخش اصلی (div) با کلاس “container” برای نگه‌داشتن اجزای اسلایدر ایجاد می‌کند.
- داخل بخش اصلی، سه قسمت یکسان برای هر اسلاید (div با کلاس “image-sliderfade fade”) تعریف شده است.
- هر اسلاید شامل یک تصویر (img) با عرض ۱۰۰ درصد و یک متن شرح (div با کلاس “text”) است.
- زیر اسلایدرها، یک بخش با متن وسط‌چین (“div”) با سه عنصر خالی (span با کلاس “dot”) وجود دارد که احتمالاً برای نمایش نقاط ناوبری (دایره یا نقطه) در نظر گرفته‌شده است.
- در نهایت، یک اسکریپت با تگ <script> به یک فایل جاوا اسکریپت خارجی (“script.js”) اشاره می‌کند که احتمالاً مسئولیت کنترل نمایش اسلایدها و قابلیت‌های دیگر را برعهده دارد (اما فعلاً در این کد وجود ندارد).
نکته مهم: این کد فقط بخش ظاهری اسلایدر را با HTML ساخته و برای اینکه اسلایدها عوض شوند یا نقطه‌های ناوبری کار کنند، به کدهای جاوا اسکریپت در فایل script.js نیاز است که فعلاً در این کد گنجانده نشده است.
استایل بندی اسلایدر با CSS
در فایل CSS از آموزش ساخت اسلایدر با جاوا اسکریپت، کدهای زیر را قرار دهید:
// CSS code* { box-sizing: border-box;}body { font-family: Verdana, sans-serif;}.image-sliderfade { display: none;}img { vertical-align: middle;}/* Slideshow container */.container { max-width: 1000px; position: relative; margin: auto;}/* Caption text */.text { color: #f2f2f2; font-size: 15px; padding: 20px 15px; position: absolute; right: 10px; bottom: 10px; width: 40%; background: rgba(0, 0, 0, 0.7); text-align: left;}/* The dots/bullets/indicators */.dot { height: 15px; width: 15px; margin: 0 2px; background-color: transparent; border-color: #ddd; border-width: 5 px; border-style: solid; border-radius: 50%; display: inline-block; transition: border-color 0.6s ease;}.active { border-color: #666;}/* Animation */.fade { -webkit-animation-name: fade-image; -webkit-animation-duration: 1.5s; animation-name: fade-image; animation-duration: 1.5s;}@-webkit-keyframes fade-image { from { opacity: 0.4; } to { opacity: 1; }}@keyframes fade-image { from { opacity: 0.4; } to { opacity: 1; }}/* On smaller screens, decrease text size */@media only screen and (max-width: 300px) { .text { font-size: 11px; }}این کد CSS، استایل‌های ظاهری اسلایدر تصویر را تعریف می‌کند:
- به‌طورکلی، به همه تگ‌ها می‌گوید که اندازه باکس را بر اساس padding و border محاسبه کند (box-sizing: border-box).
- فونت متن بدنه (body) را Verdana یا یک فونت sans-serif مشابه تنظیم می‌کند.
- ابتدا همه اسلایدرها (با کلاس “image-sliderfade”) را مخفی می‌کند (display: none).
- تنظیمات کلی برای تصاویر را مشخص می‌کند (vertical-align: middle برای تراز عمودی بهتر).
- برای بخش اصلی اسلایدر (کلاس container) حداکثر عرض 1000 پیکسل، موقعیت نسبی (position: relative) و قرارگیری وسط صفحه (margin: auto) را تعریف می‌کند.
- استایل متن‌های زیرنویس اسلایدر (کلاس text) را شامل رنگ، اندازه فونت، فاصله از لبه‌ها، موقعیت مطلق (position: absolute), موقعیت در گوشه پایین سمت راست و عرض 40% صفحه، پس‌زمینه نیمه شفاف سیاه و تراز چپ متن را مشخص می‌کند.
- استایل نقاط ناوبری (کلاس dot) را شامل ارتفاع، عرض، فاصله از هم، رنگ پس‌زمینه شفاف، رنگ و ضخامت حاشیه، شکل گرد، نمایش به‌صورت خطی و انیمیشن تغییر رنگ حاشیه در زمان فعال شدن را تعریف می‌کند.
- کلاس active رنگ حاشیه نقاط را در زمان فعال شدن به خاکستری تیره (#666) تغییر می‌دهد.
- یک انیمیشن با نام fade-image تعریف می‌کند که باعث محو شدن تدریجی تصاویر اسلایدر هنگام نمایش می‌شود (opacity از 0.4 به 1).
- برای نمایش بهتر درگوشی‌های موبایل، اندازه فونت متن زیرنویس را در صورت کوچک بودن صفحه نمایش (کمتر از 300 پیکسل) کاهش می‌دهد.
پیشنهاد مطالعه: آموزش Ajax در جاوا اسکریپت با ۳ رویکرد ساده
کدهای جاوا اسکریپت ساخت اسلایدر
در فایل جاوا اسکریپت، کدهای زیر را قرار دهید:
let slideIndex = 0;showSlides(); // call showslide methodfunction showSlides() { let i; // get the array of divs' with classname image-sliderfade let slides = document.getElementsByClassName("image-sliderfade"); // get the array of divs' with classname dot let dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { // initially set the display to // none for every image. slides[i].style.display = "none"; } // increase by 1, Global variable slideIndex++; // check for boundary if (slideIndex > slides.length) { slideIndex = 1; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; // Change image every 2 seconds setTimeout(showSlides, 2000);}در این کد از آموزش ساخت اسلایدر با جاوا اسکریپت، توابع و رویدادهایی برای مدیریت نمایش اسلایدر و جابجایی بین تصاویر نوشته شده است. این کد جاوا اسکریپت، نمایش و تغییر اتوماتیک اسلایدر تصویر را کنترل می‌کند:
- ابتدا یک متغیر سراسری به نام slideIndex تعریف می‌کند که برای کنترل تصویر فعال (اسلاید جاری) استفاده می‌شود و مقدار اولیه آن صفر است.
- سپس با فراخوانی تابع showSlides()، اسلایدر را راه‌اندازی می‌کند.
تابع showSlides():
- یک متغیر کمکی i برای استفاده در حلقه‌های for تعریف می‌کند.
- با استفاده از getElementsByClassName آرایه‌ای از تمام بخش‌های div با کلاس image-sliderfade (اسلایدها) را در متغیر slides ذخیره می‌کند.
- به همین ترتیب آرایه‌ای از تمام بخش‌های div با کلاس dot (نقاط ناوبری) را در متغیر dots ذخیره می‌کند.
- یک حلقه for اجرا می‌کند که تمام اسلایدها را طی می‌کند و با تنظیم display: none برای همه، ابتدا آن‌ها را مخفی می‌سازد.
- مقدار متغیر سراسری slideIndex را برای نمایش اسلاید بعدی، یک واحد افزایش می‌دهد.
- یک شرط بررسی می‌کند که آیا slideIndex از تعداد کل اسلایدها بیشتر شده است یا خیر. اگر چنین باشد، با مقداردهی مجدد 1 به slideIndex، نمایش اسلاید از ابتدا شروع می‌شود (برای ایجاد حلقه).
- یک حلقه for دیگر اجرا می‌کند که تمام نقاط ناوبری را طی می‌کند و با حذف کلاس active از آن‌ها، حالت فعال را برای همه غیرفعال می‌سازد.
- با استفاده از slideIndex – 1 (برای رسیدن به اندیس صحیح آرایه که از صفر شروع می‌شود)، اسلاید صحیح را از آرایه slides انتخاب کرده و با display: block آن را نمایش می‌دهد.
- به همین ترتیب، با استفاده از slideIndex – 1، نقطه ناوبری مربوط به اسلاید فعال را از آرایه dots انتخاب کرده و با اضافه کردن کلاس “active” به آن، حالت فعال را برایش تعیین می‌کند.
- در نهایت با استفاده از setTimeout، تابع showSlides را دوباره با تأخیر 2 ثانیه (2000 میلی‌ثانیه) فراخوانی می‌کند. این کار باعث می‌شود که تابع به طور خودکار هر 2 ثانیه اجراشده و اسلاید بعدی را نمایش دهد و به‌این‌ترتیب اسلایدر به‌صورت اتوماتیک تغییر کند.
با ذخیره‌سازی فایل‌های HTML، CSS و جاوا اسکریپت، می‌توانید اسلایدر تصویر خود را در مرورگر مشاهده کنید. خروجی نهایی آموزش ساخت اسلایدر با جاوا اسکریپت به صورت زیر خواهد بود:
شخصی سازی آموزش ساخت اسلایدر با جاوا اسکریپت
شما می‌توانید با توجه به نیاز خود، اسلایدر تصویر را به روش‌های مختلفی شخصی‌سازی کنید. در اینجا چند نمونه از این روش‌ها را شرح می‌دهیم:
- افزودن تصاویر بیشتر: می‌توانید تعداد تصاویر موجود در اسلایدر را به دلخواه خود افزایش دهید. برای این کار، کافی است کد HTML مربوط به تصاویر را در فایل HTML کپی و پیست کنید.
- تغییر افکت‌های جابجایی: می‌توانید افکت‌های جابجایی بین تصاویر را به دلخواه خود تغییر دهید. برای مثال، می‌توانید از افکت محو شدن (Fade) یا حرکت به سمت چپ و راست (Slide) استفاده کنید.
- افزودن دکمه‌های ناوبری: می‌توانید دکمه‌های ناوبری بیشتری به اسلایدر اضافه کنید. برای مثال، می‌توانید دکمه‌هایی برای رفتن به اسلاید اول، آخر یا اسلاید تصادفی ایجاد کنید.
- تنظیم سرعت جابجایی: می‌توانید سرعت جابجایی بین تصاویر را به دلخواه خود تنظیم کنید. برای این کار، کافی است مقدار متغیر transition در فایل CSS را تغییر دهید.
- افزودن عنوان و توضیحات به تصاویر: می‌توانید به هر تصویر، عنوان و توضیحات مختصری اضافه کنید. این کار باعث می‌شود تا مخاطب اطلاعات بیشتری در مورد تصاویر داشته باشد.
- ایجاد اسلایدر ریسپانسیو: می‌توانید اسلایدر را به‌گونه‌ای طراحی کنید که در تمامی دستگاه‌ها، از جمله کامپیوترهای رومیزی، تبلت‌ها و تلفن‌های همراه، به‌درستی نمایش داده شود. برای این کار، باید از تکنیک‌های CSS ریسپانسیو استفاده کنید.
چگونه می‌توانم از تصاویر با ابعاد مختلف در اسلایدر استفاده کنم؟
برای استفاده از تصاویر با ابعاد مختلف در اسلایدر، می‌توانید از CSS Flexbox یا Grid Layout استفاده کنید. این تکنیک‌ها به شما امکان می‌دهند تا تصاویر را به‌گونه‌ای در اسلایدر نمایش دهید که فضای خالی بین آن‌ها به حداقل برسد.
چگونه می‌توانم اسلایدر را به‌صورت عمودی نمایش دهم؟
برای نمایش اسلایدر به‌صورت عمودی، کافی است جهت نمایش تصاویر (display) را در فایل CSS از flex-direction: row به flex-direction: column تغییر دهید.
چگونه می‌توانم از ویدیو در اسلایدر استفاده کنم؟
برای استفاده از ویدیو در اسلایدر، می‌توانید به‌جای تگ img از تگ video در فایل HTML استفاده کنید.
پیشنهاد مطالعه: آموزش تگ های جاوا اسکریپت به زبان ساده
چگونه می‌توانم از اسلایدر در کتابخانه‌های جاوا اسکریپت مانند Slick یا Swiper استفاده کنم؟
کتابخانه‌های جاوا اسکریپت مانند Slick یا Swiper می‌توانند به شما در ساخت اسلایدرهای پیچیده‌تر با قابلیت‌های بیشتر کمک کنند. برای استفاده از این کتابخانه‌ها، باید مستندات آن‌ها را مطالعه کرده و از توابع و روش‌های ارائه شده در آن‌ها استفاده کنید.
جمع بندی
در این مقاله آموزشی، نحوه ساخت اسلایدر تصویر با استفاده از HTML، CSS و جاوا اسکریپت را به‌صورت گام‌به‌گام شرح دادیم. با استفاده از این آموزش ساخت اسلایدر با جاوا اسکریپت، می‌توانید اسلایدرهای تصویری جذاب و پویا برای وب‌سایت خود ایجاد کنید و به‌این‌ترتیب، تجربه کاربری مخاطبان خود را ارتقا دهید.
مکتب خونه مرجع کامل و جامعی برای آموزش طراحی سایت، آموزش برنامه نویسی و آموزش جاوا اسکریپت است. در این پلتفرم می‌توانید دوره‌های آموزشی مختلفی را مشاهده کرده و گواهینامه مرتبط با آن را نیز دریافت کنید.
