آموزش کار با swiper در جاوا اسکریپت

کار با swiper همیشه یکی از دغدغه های طراحان سایت بوده و همه به دنبال راهی هستند تا یک کد واحد در این زمینه پیدا کنند که برای تمام سایت هایشان از آن استفاده کنند. در واقع ساخت swiper با javaScript کار خیلی راحتی هست و اگر به درستی آموزش دیده باشید اصلا درگیر پیچیدگی های آن نخواهید شد. تقریبا در همه سایت های مدرن یک مدل swiper وجود دارد که با اهداف مختلف به کارگیری شده است. این موضوع نشان از محبوبیت بالای swiper می دهد. برای راحتی کار شما ما سعی کرده ایم مرحله به مرحله روش ساخت و کار با آن را به شما آموزش دهیم.

• در مرحله اول یک سند html بسازید.
• در قسمت body کد html زیر را قرار دهید.

<div class=”swippershow-container”>
<div class=”mySwippers1″>
<img src=”https://atgo.ir/files/uploads/2021/06/Solve-the-problem-of-not-indexing-the-site-in-Google.jpg” style=”width:100%”>
</div>

<div class=”mySwippers1″>
<img src=”https://atgo.ir/files/uploads/2021/06/How-to-register-a-site-in-Google-Analytics.jpg” style=”width:100%”>
</div>

<div class=”mySwippers1″>
<img src=”https://atgo.ir/files/uploads/2021/06/What-is-unique-content.jpg” style=”width:100%”>
</div>

<a class=”prev” onclick=”plusSwippers(-1, 0)”>&#10094;</a>
<a class=”next” onclick=”plusSwippers(1, 0)”>&#10095;</a>
</div>

قبل از بسته شدن تگ <head/> تگ <style></style> باز کرده و کد css زیر را بین تگ استایل تان پیست کنید. البته می توانید این کد را مستقیم در فایل css. پیست کنید.

* {box-sizing: border-box}
.mySwippers1, .mySwippers2 {display: none}
img {vertical-align: middle;}

/* Swippershow container */
.swippershow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

/* Position the “next button” to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}

حالا نوبت به قرار دادن کد javaScript اسلایدر تصاویر می رسد. شما هم می توانید این کد را در تگ <script></script> قبل از بسته شدن <body/> قرار دهید و هم می توانید آن را مستقیما در فایل js. پیست کنید.

<script>
let swipperIndex = [1,1];
let swipperId = [“mySwippers1”, “mySwippers2”]
showSwippers(1, 0);
showSwippers(1, 1);

function plusSwippers(n, no) {
showSwippers(swipperIndex[no] += n, no);
}

function showSwippers(n, no) {
let i;
let x = document.getElementsByClassName(swipperId[no]);
if (n > x.length) {swipperIndex[no] = 1}
if (n < 1) {swipperIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = “none”;
}
x[swipperIndex[no]-1].style.display = “block”;
}
</script>

شما تنها با عوض کردن آدرس تصاویرتان که در قسمت src زیر نشان داده شده می توانید تصاویر مورد نظرتان را جایگزین کنید.

<img src=”../img.jpg ” style=”width:100%”>
آنچه که تا حالا به آن اشاره کردیم تنها یک نمونه swiper ساده بود که سایت های کوچک بسته به نیاز خود می توانند از آن استفاده کنند. اما این swiper به آن اندازه حرفه ای نیست که بتواند توقعات سایت های بزرگ را برآورده کند. برای این منظور سعی کرده ایم در ادامه ساخت swiper حرفه ای تر را هم به شما آموزش دهیم.

ساخت swiper حرفه ای

نمونه دوم swiper آموزش داده شده در این مقاله اسلایدر کمی حرفه ای تر است و برای تغییر تصویر افکتی اعمال شده است. اگر تا حدودی با html , css آشنایی داشته باشید، قطعا می توانید اسلایدر های حرفه ای تری با استایل های جذاب تری از ما تولید کنید. این swiper صرفا برای آشنایی شما با ساخت swiper با javaScript آموزش داده شده و شما تنها با تمرین کردن می توانید اسلایدر های حرفه ای تری را بسازید.

برای ساخت swiper حرفه ای با javaScript شما در مرحله اول بعد از ساخت سند html باید کد زیر را در قسمت کد html اسلایدر قرار دهید.

<div class=” swipperr ” >
<div class=” swipperr-items ” >
<div class=”item active”>
<img src=” file:///C:/Users/Atgo%204/Desktop/swipperr-atgo-2.jpg ” alt=”” >
<div class=”caption”>
swipper 1
</div>
</div>
<div class=”item”>
<img src=” file:///C:/Users/Atgo%204/Desktop/swipperr-atgo-3.jpg ” alt=”” >
<div class=”caption”>
swipper 2
</div>
</div>
<div class=”item”>
<img src=” file:///C:/Users/Atgo%204/Desktop/swipperr-atgo-4.jpg ” alt=”” >
<div class=”caption” >
swipper 3
</div>
</div>
</div>
<!– swipperr cintrols –>
<div class=”left-swipper”><</div>
<div class=”right-swipper”>></div>
<!– swipperr cintrols –>

</div>

در مرحله بعدی برای استایل دادن به swiper لازم است که کد زیر را یا در فایل style.css ذخیره کنید و یا در تگ استایل همان فایل html کد زیر را پیست کنید.

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.swipperr{
max-width : 700px;
margin: 60px auto;
border : 10px solid #b1aaa2;
position : relative;
overflow : hidden;
}
.swipperr .swipperr-items .item img{
width: 100%;
display: inline;border-left : 1px solid #000;
animation: zoom 1s ease;
}
@keyframes zoom {
0%{
transform: scale(2);
opacity: 0;
filter: brightness(3);
}
30%{
transform: scale(2);
opacity: 1;
}
100%{
transform: scale(1);
opacity: 1;
}

}
.swipperr .swipperr-items .item{
display: none;
position : relative;
}
.swipperr .swipperr-items .active{
Display : block;
}
.swipperr .swipperr-items .item .caption{
Position : absolute;
width : 100%;
height : 50px;
left : 0;
bottom : 0;
text-align : center;
font-size : 30px;
color : orangered;
background-color : rgb( 0, 0, 0, 0.5 );
}
.swipperr .left-swipper , .swipperr .right-swipper{
Position : absolute;
top : 50%;
width : 40px;
height : 40px;
background-color : rgb( 0, 0, 0, 0.5 );
border-radius : 50%;
color : orangered;
text-align : center;
font-size : 30px;
line-height : 40px;
margin-top : -20px;
cursor : pointer;
transition : all 0.5s ease;
}
.swipperr .left-swipper{
Left : 30px;
}
.swipperr .right-swipper{
Right : 30px;
}
.swipperr .left-swipper:hover , .swipperr .right-swipper:hover{
background-color : #b1aaa2;
color : black;
box-shadow : 0 0 5px white;
}

در مرحله بعد نوبت به کد javaScript اسلایدر تصاویر می رسد که می توانید آن را مستقیم در فایل جاوااسکریپت قرار دهید و یا در تگ اسکریپت در فایل html آن را پیست کنید.

<script>
let swippers = document.querySelector(“.swipperr-items”).children;
let nextswipper = document.querySelector(“.right-swipper”);
let preswipper = document.querySelector(“.left-swipper”);
let totalswippers = swippers.length;
let index = 0;
nextswipper.onclick= function(){
next(“next”);
}
preswipper.onclick= function(){
next(“pre”);
}
function next(direction){
if( direction == “next” ){
index++;
if( index == totalswippers ){
index=0;
}
}
else{
if( index == 0 ){
index= totalswippers – 1;
}
else{
index–;
}
}
for(let i = 0 ; i<totalswippers ; i++){
swippers[i].classList.remove(“active”);
}
swippers[index].classList.add(“active”);
}
</script>

شما با copy کردن این کد ها می توانید swiper تا حدودی حرفه ای تر از قبلی بسازید. توجه داشته باشید برای ساخت اسلایدر سایت اگر سرعت load شدن سایت برایتان مهم است از استفاده ی افزونه یا پلاگین های آماده خودداری کنید. زیرا این پلاگین ها حجم زیادی داشته و سرعت سایت را تا حد زیادی کاهش می دهد. پس بهتر است حتی اگر سایت شما وردپرسی است کد های آموزش داده شده را در html سفارشی قرار دهید تا سرعت سایت شما را تحت تاثیر قرار ندهد. البته باید این نکته را در نظر داشته باشید که لاگر سئو سایت برای شما اهمیت ندارد و صرفا سایت تان رابرای زیبایی میسازید استفاده از پلاگین ها محدودیتی برای شما ندارد و دیر لود شدن سایتتان تاثیری روی رتبه شما نخواهد داشت. برای دریافت مشاوره طراحی سایت کلیک کنید.

ویژگی های swiper های آموزش داده شده

• پشتیبانی از فونت آیکون
• پشتیبانی از Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone , …
• قابلیت قرار دادن ویدئو
• پشتیبانی از تصاویر بند انگشتی
• قابلیت نوشت عنوان و شرح تصاویر
• قابلیت شخصی سازی بسیار سریع و آسان
• بسیار سبک
• دارای افکت‌های زیبا
• تصاویر جداگانه برای دستگاه‌های موبایل
• کنترل اسلایدر به وسیله کیبرد
• و …