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

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

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

آنچه در این مقاله می خوانید ...
کدهای css! کدهای js اسلایدر!

 

کدهای 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
>
<


 

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

1398/04/13

نویسنده: رضا

3990 بار

برچسب ها:

2 پاسخ به “ساخت اسلایدر با جاوا اسکریپت”

  1. مهسا حسن زاده گفت:
    اردیبهشت 3, 1400 در 4:45 ق.ظ

    سلام ممنون از مطلب
    ایراد بزرگی که داره اینه که یه فایل دانلودی از کار خروجی وجود نداره

    حالا اونم هیچ کدهای html و معرفی کلاس ها در html رو خوب نذاشتید
    منتظرم هستم
    سایتتون رو چک می کنم
    🙏

    پاسخ

دیدگاهتان را بنویسید

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