ساخت اسلایدر با جاوا اسکریپت
همانطور که در کد های فوق می بینید یک 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
5733 بار
سلام
در حال تغییرات اساسی هستیم اما زمان بر هست به زودی انشاالله در خدمتتون هستیم.