امروز به آموزش ساخت اسلایدر با jquery می پردازیم. همانطور که حتماً می دانید کتابخانۀ jquery یکی از کتابخانه های قدرتمند کدنویسی در زبان جاوا اسکریپت می باشد. پیش نیاز درک این آموزش اینست که شما با html و css و کتابخانۀ jquery آشنا باشید. در این آموزش برای نوشتن کدهای css از SCSS استفاده خواهیم کرد. لازم است در همین ابتدای کار اشاره کنم که SCSS نوع خاصی از فایل های SASS می باشد. خود SASS هم برنامه ای است که به زبان Ruby نوشته شده است و امکانات فراوانی را به css می افزاید. به عنوان مثال به کمک SCSS شما می توانید متغیرهایی را تعریف کنید، css ها را تو در تو کنید، و کارهای بسیار دیگری را انجام دهید که در css به سادگی قابل انجام نیستند. البته توجه داشته باشید که فایل های SCSS در سمت سرور پردازش می شوند، اما خروجی آنها به css ترجمه می شود و به سمت مرورگر ارسال می شود. در واقع SCSS که بخشی از SASS است، یک پیش پردازنده برای توسعۀ css می باشد. همچنین در این آموزش از بوت استرپ نیز استفاده می کنیم تا ظاهر صفحاتمان حرفه ای تر شوند.

اگر در ارتباط با SASS مشتاق یادگیری بیشتری هستید، آموزش مقدماتی پیش پردازنده Sass برای توسعه CSS را که یک منبع آموزشی جامع و ارزشمند می باشد، به شما توصیه می کنم.

• آموزش مقدماتی پیش پردازنده Sass برای توسعه CSS -- کلیک کنید

ساخت بخش html اسلایدر

مسلماً در اولین قسمت از آموزش ساخت اسلایدر با jquery، باید به بخش html آن بپردازیم. در این قسمت ما از فریم ورک بوت استرپ (Bootstrap) نیز کمک خواهیم گرفت. ساختار html ما به شکل زیر می باشد.

<div class="container"> <!-- The wrapper for our slider --> <div class="slider"> <ul class="slides"><!-- Each image will be inside this unordered list --></ul> </div> <div class="buttons"><!-- Pause and play buttons will go in here --></div> </div>
در قطعه کد بالا از کلاس Container در بوت استرپ استفاده شده است. Container ها یکی از بلاک های اصلی تشکیل دهندۀ بوت استرپ می باشند و امکان چینش قالب های اصلی محتوا، و تنظیم آن به صورت واکنش گرا را فراهم می سازند.

در داخل ul ای که کلاس slides را به آن داده ایم، تگ های li زیر را خواهیم داشت. تصاویر ما در این تگ ها قرار خواهند گرفت.

<li class="slide"><img src="#" /></li> <li class="slide"><img src="#" /></li> <li class="slide"><img src="#" /></li> <li class="slide"><img src="#" /></li> <li class="slide"><img src="#" /></li>
در داخل کلاس buttons باید تگ های زیر را اضافه کنید. این بخش در واقع دکمه هایی هستند که با کلیک بر روی آنها تغییر سریع تصاویر اسلایدر انجام می شوند.

<button type="button" class="btn btn-default pause"> <span class="glyphicon glyphicon-pause"></span> </button> <button type="button" class="btn btn-default play"> <span class="glyphicon glyphicon-play"></span> </button>
در قطعه کد بالا از کلاس btn btn-default pause در بوت استرپ استفاده شده است. این کلاس برای زیبا سازی دکمه ها به کار می رود و به آن ها حالت شکیلی می دهد. البته تم اصلی دکمه ها در بوت استرپ به خود ظرف آن نیز بستگی دارد. تصویر زیر انواع باتن ها در بوت استرپ را به شما نشان می دهد.


در پایان این بخش، خروجی شما باید چیزی شبیه کدهای زیر باشد. توجه داشته باشید که در ویژگی src باید آدرس تصاویر خودتان را بدهید.

<div class="container"> <div class="slider"> <ul class="slides"> <li class="slide"><img src="https://unsplash.it/1280/720/?image=120" /></li> <li class="slide"><img src="https://unsplash.it/1280/720/?image=70" /></li> <li class="slide"><img src="https://unsplash.it/1280/720/?image=50" /></li> <li class="slide"><img src="https://unsplash.it/1280/720/?image=170" /></li> <li class="slide"><img src="https://unsplash.it/1280/720/?image=190" /></li> </ul> </div> <div class="buttons"> <button type="button" class="btn btn-default pause"> <span class="glyphicon glyphicon-pause"></span> </button> <button type="button" class="btn btn-default play"> <span class="glyphicon glyphicon-play"></span> </button> </div> </div>
در قطعه کد بالا کلاس glyphicon glyphicon-pause مورد استفاده قرار گرفته است. خوب است بدانید Glyphicon ها بخشی از بوت استرپ می باشند که به شما این امکان را می دهند که به سادگی آیکون های مختلفی را از بین ده ها آیکون موجود انتخاب نمایید. تنها کاری که باید انجام دهید اینست که یک span بسازید و کلاس خاص Glyphicon مربوطه را به آن تخصیص بدهید. تصویر زیر نمونه ای از این آیکون ها را به شما نشان می دهد.


در بخش هایی از این کد با کلاس هایی همچون container یا button یا btn btn-default play مواجه می شوید. این کلاس ها مربوط به بوت استرپ می باشند. بد نیست بدانید که فریم ورک رایگان بوت استرپ امکانات وسیع فراوانی برای طراحی زیبا و سریع، آنهم به صورت کاملاً واکنش گرا، به شما هدیه می دهد. اگر مایل هستید که با این فریم ورک عالی و البته مطرح جهانی، بیشتر آشنا شوید، آموزش بوت استرپ Bootstrap برای طراحی صفحات وب که در فرادرس منتشر شده است را به شما توصیه می کنم.

• آموزش بوت استرپ Bootstrap برای طراحی صفحات وب در فرادرس -- کلیک کنید

ساخت بخش css اسلاید با استفاده از SCSS

در مقدمۀ مقالۀ آموزش ساخت اسلایدر با jquery به SCSS و کاربرد آن اشاره کردیم. در این قسمت از کدنویسی های مرتبط با ساخت اسلایدر، به کمک SCSS کدهای css را تولید می کنیم. دلیل استفادۀ ما از SCSS در این بخش از اسلایدر اینست که به سادگی بتوانیم متغیرهایمان را تعریف کنیم. کدهای SCSS مربوط به این اسلایدر را در ادامه می بینید.

// Variables

$width: 720px;

.slider {

  width: $width;

  height: 400px;

  overflow: hidden;

  margin: 0 auto;

  text-align: center;

  .slides {

    display: block;

    width: 6000px;

    height: 400px;

    margin: 0;

    padding: 0;

  }

  .slide {

    float: left;

    list-style-type: none;

    width: $width;

    height: 400px;



    img {

      width: 100%;

      height: 100%;

    }

  }

}

.buttons {

  margin: 0;

  width: $width;

  position: relative;

  top: -40px;

  margin: 0 auto;

  .play {

    display: none;

  }

  .btn {

    display: flex;

    margin: 0 auto;

    text-align: center;

  }

}

در بخش آغازین آموزش ساخت اسلایدر با jquery به SASS اشاره کردیم. هر چند استفادۀ ما از SASS در این پروژه محدود بود. اما اگر برای اولین بار است که این نام را می شنوید، سرسری از آن عبور نکنید و روی آن بیشتر وقت بگذارید. استفاده از SASS مزایای فراوان دیگری نیز دارد که هر چند فراتر از پروژۀ فعلی است، اما به صورت خلاصه وار به آنها اشاره ای می کنم. شما به کمک SASS تکرارها در کدهای CSS را به شدت کاهش می دهید. دلیل این امر هم مبتنی بر برنامه نویسی بودن آن است و پشتیبانی آن از ساختارهای برنامه نویسی ساختیافته همچون حلقه ها و ... می باشد. همین طور خوب است بدانید که SASS با تمامی نسخه های CSS سازگار است و از این بابت نیز، نگرانی خاصی نداشته باشید.

اگر در حوزۀ طراحی سایت شور یادگیری بیشتری دارید، مجموعه آموزش طراحی سایت را به عنوان یک مجموعۀ آموزشی ارزشمند به شما توصیه می کنم.

• مجموعه آموزش طراحی سایت در فرادرس -- کلیک کنید

ساخت بخش JS اسلایدر

در قطعه کد زیر، یک سری متغیر را تعریف نموده ایم که در ادامه در کدها از آنها استفاده خواهیم کرد.

var animationSpeed = 1000; // How quickly the next slide animates.

var pause = 3000; // The pause between each slide.

از یک متغیر خالی هم برای فراخوانی متد setInterval استفاده خواهیم کرد.

var interval;

انیمیشن های مربوط به اسلایدر را در داخل یک تابع قرار می دهیم.

function startSlider() {}

برای اتوماتیک سازی محتوای این تابع بر اساس بازه های زمانی خاصی، از یکی از متدهای داخلی جاوا اسکریپت با نام setInterval استفاده می کنیم.

interval = setInterval(function() {}, pause);

از متغیر pause بدین منظور استفاده می کنیم که مشخص شود قبل از فراخوانی مجدد تابع انیمیشن، چند میلی ثانیه باید صبر کنیم. از jQuery برای ایجاد افکت های مختلف در بین اسلایدها استفاده می کنیم. در اینجا ما از افکت fade برای حالت محو شدن، استفاده کرده ایم.

$('.slides > li:first')

  .fadeOut(animationSpeed)

  .next()

  .fadeIn(animationSpeed)

  .end()

  .appendTo('.slides');

در این قطعه کد، افکت محو شدن بر روی تصاویری که وارد اسلایدر می شوند و همچنین تصاویری که از اسلایدر خارج می شوند، اعمال می شود. متد next ما را به اسلاید بعدی می برد. در پایان یعنی وقتی که متد end فراخوانی شد، از تابع startSlider برای آغاز انیمیشن استفاده می کنیم.

تابع fadeOut که در اینجا از آن استفاده کرده ایم، یک عنصر از html را مخفی می کند و البته اینگونه نیست که آن را به صورت ناگهانی و دفعتاً مخفی سازد، بلکه آن را با تمی که حالت محو شدن دارد، مخفی می سازد. تابع fadeIn در نقطۀ مقابل fadeOut قرار دارد. بدین نحو که عملیات نمایان کردن یک عنصر از html را با افکت محو شدن انجام می دهد. البته این دو تابع پارامترهای بیشتری هم دارند که به کمک آنها می توانید کنترل دقیق تری بر چگونگی اجرایشان داشته باشید. ما در اینجا به دلیل سادگی، از این پارامترها که البته اختیاری هم هستند، صرفنظر کرده ایم.

startSlider();

اگر تمایل دارید که امکان متوقف کردن را در اسلایدر بگنجانید، می توانید با قطعه کد زیر، این کار را انجام دهید. ویژگی متوقف کردن موقت اختیاری است و در همۀ جاها کاربرد ندارد. برای این منظور یک دکمۀ pause ایجاد می کنیم و کد رویۀ کلیک این دکمه را نیز در قطعه کد زیر می بینید.

$('.play').hide(); // Hiding the play button.



$('.pause').click(function() {

	clearInterval(interval);

	$(this).hide();

	$('.play').show();

});

هر بار که دکمۀ متوقف کردن کلیک شود متد clearInterval با آرگومانی که همان متغیر interval می باشد که در آغاز معرفی نمودیم، فراخوانی می شود. این متغیر مشخص می سازد که اسلایدر ما در چه زمانی متوقف شده است.

ما در این مقالۀ آموزش ساخت اسلایدر با jquery از کتابخانۀ jQuery صرفاً به اندازۀ نیاز استفاده کردیم و بسیار کم با آن آشنا شدید. اگر مایل هستید که این آشنایی را توسعه بدهید و با جنبه های مختلف این کتابخانۀ قدرتمند بیشتر آشنا شوید، مجموعه آموزش‌ jQuery (جی کوئری) را از دست ندهید.

• مجموعه آموزش‌ jQuery (جی کوئری) -- کلیک کنید

ساخت اسلایدر به کمک پلاگین ها در jQuery

تا اینجای آموزش ساخت اسلایدر با jquery به روش معمول و دستی که مبتنی بر کدنویسی بود، پرداختیم. همانطور که می دانید اسلایدر ها که البته در انگلیسی واژۀ carousel بیشتر به آنها اطلاق می شود، یکی از رابط های کاربری مدرن در وب هستند و به وفور در وبسایت ها و نرم افزارهای تحت وب مختلف مورد استفاده قرار می گیرند. به عنوان مثال اینستاگرام هم برای ورق زدن تصاویر از این رابط کاربری استفاده کرده است. در اینجا قصد دارم چند پلاگین مطرح و خوشنام را معرفی کنم که به کمک آنها کار ساخت اسلایدر بسیار ساده تر هم می شود.

پلاگین jQuery Slick

پلاگین Slick برای ساخت اسلایدرهای رسپانسیو (واکنش گرا) بسیار عالی است. اسلایدرهای ساخته شده توسط این پلاگین در موبایل نیز بسیار چشم نواز هستند. این پلاگین از CSS3 استفاده می کند. امکان پخش اتوماتیک و پشت سر هم تصاویر را دارید، دیگر لازم نیست برای دکمه های حرکت سریع بین تصاویر کدنویسی جداگانه ای انجام دهید. همچنین امکان نمایش فلش های حرکت بین تصاویر در دو سمت اسلایدر را نیز به شما می دهد. اگر به دنبال این پلاگین و همچنین نمونه کدی برای کار با آن می باشید، روی این لینک کلیک کنید.

پلاگین multiple items per slide

پلاگین multiple items per slide را می توانید از این لینک دریافت نمایید. همچنین نمونه کد برای کار با آن نیز در همین لینک وجود دارد. مزیت این پلاگین اینست که بسیار سبک است. همچنین با بوت استرپ کار می کند و برای استفاده از آن باید رفرنس بوت استرپ را نیز در صفحۀ html تان داشته باشید. این پلاگین نیز رسپانسیو می باشد و هم برای دسکتاپ و هم برای موبایل بهینه شده است. تم های بسیار زیبای متنوعی هم دارد که با تنظیم پارامترهای مختلف آن می توانید بین این تم ها سوئیچ کنید.

سخن آخر

در طول این آموزش ساخت اسلایدر با jquery ابتدا یک اسلایدر را به صورت دستی و با کدنویسی ایجاد نمودیم. در ادامه شما را با دو پلاگین برای ساخت سریع تر و البته راحت تر اسلایدر در jQuery آشنا ساختیم. یکی از نکات مهمی که مایلم در پایان این مقاله به شما گوشزد کنم اینست که در دنیای وب ماهیت برنامه نویسی طوری است که شما مجبور هستید قادر به کار با ابزارهای مختلف باشید. چرا که گاهی حتی علی رغم میل باطنی تان به سمتی کشیده می شوید که مجبور به کار با آنهایید. به عنوان مثال شما به دنبال یک پلاگین اسلایدر هستید، بعد طبق کدهای نمونه، آن پلاگین را مورد استفاده قرار می دهید. در ادامه مجبور می شوید آن کدها را اندکی تغییر دهید تا متناسب با نیازتان شود، ناگهان متوجه می شوید که آن پلاگین خودش از کتابخانه ها دیگری نیز استفاده کرده است. اینجاست که چالش در چالش می شود. پس همواره خودتان را آموزش پذیر نگه دارید و هرگز دست از آموزش دیدن نکشید.

در پایان این مقاله مایلم منابع آموزشی زیر را نیز با شما به اشتراک بگذارم:

• مجموعه آموزش طراحی سایت با HTML و CSS
• مجموعه آموزش‌ PHP | آموزش برنامه نویسی پی اچ پی | مقدماتی تا پیشرفته