ایجاد اسلایدر با جاوا اسکریپت

ساخت اسلایدر با جاوا اسکریپت

یکی از مواردی که می توان با استفاده از java script ایجاد نمود، متحرک سازی عناصر می باشد. همانطور که قبلا نیز به آن اشاره کردیم به غیر از به کار بردن animation در css راه دیگر متحرک سازی عناصر html استفاده از جاوا اسکریپت می باشد. یکی از مواردی که در صفحات وب با متحرک سازی می توان ایجاد نمود اسلایدر ها می باشند.

 

اسلایدر چیست؟

اسلایدر ها شامل تصاویر و محتوا هایی هستند که با دستور کاربران (کلیک، اسکرول و…) و یا به صورت اتومات درون صفحات وب حرکت می کنند. این حرکت ها می توانند خیلی ساده و یا دارای افکت های زیبا باشند. همچنین برای ساخت اسلایدرها می توان ترفند های مختلفی برای جابه جایی محتوا در نظر کاربران به کار برد مثل استفاده کردن از position ها و یا z-index .

 

ایجاد یک اسلایدر با javascript

در اینجا می خواهیم طریقه ساخت یک اسلایدر ساده به صورت کاروسل را برای شما با توضیحات مختصر و طی چند مرحله بررسی کنیم :

ابتدا باید محتوا یا عکس های مورد نیاز که قرار است به صورت یک اسلایدر به نمایش در بیایند را در یک جعبه پدر یا container در سند html قرار دهیم. (این عملیات در زمان ایجاد یک سایت داینامیک به صورت کد نویسی سمت سرور انجام می پذیرد.)

 

کدهای html

  • <section class=”container-haman-slider”>
  • <div class=”haman-slides”>
  • <div class=”slides”><img src=”img1.jpg”></div>
  • <div class=”slides”><img src=”img2.jpg”></div>
  • <div class=”slides”><img src=”img3.jpg”></div>
  • <div class=”slides”><img src=”img4.jpg”></div>
  • <div class=”slides”><img src=”img5.jpg”></div>
  • </div>
  • <span class=”hbuttons hamanbtn-left” onClick=”playleft()” > &gt; </span>
  • <span class=”hbuttons hamanbtn-right” onClick=”playright()”> &lt; </span>
  • </section>

همانطور که در کد های فوق می بینید یک section داریم که تمام کدهای html اسلایدر ما داخل آن قرار گرفته اند. section فوق از دو قسمت اصلی تشکیل شده است : که شامل اسلاید ها و کلید هایی برای تغییر مکان آن ها می باشد.

 

کدهای css

حالا نوبت استایل دادن به اسلایدر است. می خواهیم این اسلایدر را با position ایجاد نماییم به این ترتیب که section اصلی را در تمام عرض صفحه مورد نظر قرار داده و تمامی عکس ها را در کنار یکدیگر درون آن ایجاد می کنیم به طوری که در دید کاربر تنها سه عدد از این اسلاید ها قابل نمایش باشند.

  • .container-haman-slider{
  • width: 100%;height: 20vw;overflow-x: hidden;position: relative;
  • }
  • .haman-slides{
  • height: 20vw;overflow: hidden;transition: 1.5s ease all;width:166.65%
  • }
  • .slides{
  • height: 20vw;float: right;overflow: hidden;transition: 1.5s ease all;width:20%
  • }
  • .slides img{
  • width: 100%;height: 100%;transition: 1.5s ease all;
  • }
  • .slides:first-child img{
  • transform: scaleX(0.98) scaleY(0.93);box-shadow: 0 0 0.2vw 0.1vw gray;
  • }
  • .hbuttons{
  • position: absolute;font-size: 3vw;padding: 2vw 1%;display: block;cursor: pointer;color: gray;
  • }
  • .hamanbtn-left{
  • left:0.5%;top: 6.3vw;
  • }
  • .hamanbtn-right{
  • right:0.5%;top: 6.3vw;
  • }

 

 کدهای js اسلایدر

پس از نوشتن موارد فوق حال نیاز است که پس از کلید کردن بر روی hamanbtn-right یا hamanbtn-left اسلایدر شروع به حرکت کرده و دیگر عکس ها را نمایان کند. برای این منظور دو تابع تعریف می کنیم :

  • var slidewidth = document.getElementsByClassName(“haman-slides”);
  • var slideswidth = document.getElementsByClassName(“slides”);
  • slidewidth[0].style.marginRight = 0+”%”;
  • function playright1(){
  • if(parseFloat(slidewidth[0].style.marginRight) != 0){
  • slidewidth[0].style.marginRight=parseFloat(slidewidth[0].style.marginRight)+33.33+”%”;
  • }
  • }
  • function playleft1(){
  • if(parseFloat(slidewidth[0].style.marginRight) != -66.66 ){
  • slidewidth[0].style.marginRight=parseFloat(slidewidth[0].style.marginRight)-33.33+”%”;
  • }
  • }

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

 

متغیر ها در جاوا اسکریپت
javascript
حلقه ها در جاوا اسکریپت
عملگرها در javascript
ساختار و نوع نگارش javascript
>
<


 

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

توجه این اسلایدر بسیار ساده و بدون هیچ افکتی نوشته شده شما می توانید انواع افکت های زیبا را درون css آن ایجاد نموده و از آن ها استفاده نمایید.

همچنین بخوانید...!

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *