همانطور که در کد های فوق می بینید یک 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+”%”;
}
}