ساخت اسلایدر با جاوا اسکریپت
همانطور که در کد های فوق می بینید یک 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+”%”;
- }
- }
تمامی کد های فوق اسلایدری مانند اسلایدر زیر را برای شما ایجاد می کنند :
1398/04/13
4524 بار
سلام ممنون از مطلب
ایراد بزرگی که داره اینه که یه فایل دانلودی از کار خروجی وجود نداره
حالا اونم هیچ کدهای html و معرفی کلاس ها در html رو خوب نذاشتید
منتظرم هستم
سایتتون رو چک می کنم
🙏
سلام
در حال تغییرات اساسی هستیم اما زمان بر هست به زودی انشاالله در خدمتتون هستیم.