برای طراحی چنین صفحاتی می توان از پلاگین جی کوئری fullPage.js استفاده کرد که امکانات مناسبی برای این کار در اختیار ما می گذارد.

در ادامه همراه ما باشید

شروع به کار با fullPage.js

برای شروع کار با پلاگین fullPage.js ابتدا باید فایل‌های زیر را دانلود کرده و به صفحه وب خود اضافه کنید:

•  کتابخانه جی کوئری نسخه بالاتر از ۱٫۶ (jQuery > 1.6.0)
•  فایل jquery.fullpage.css
•  فایل jquery.fullpage.js و یا فایل فشرده آن (jquery.fullpage.min.js)

از اینجا می‌توانید دانلود کنید.

ایجاد بخش‌های تمام صفحه (Full-Width Sections)

بعد از قرار دادن و اتصال فایل‌ها ما باید تمام صفحات را مشخص کنیم و بخش‌بندی کنیم و درون آن بخش‌ها عناصر و اطلاعات را وارد کنیم، خب این کار بخش‌بندی در html باید کد نویسی کرد:

<div id="fullpage">
 <div class="section">Some section</div>
 <div class="section">Some section</div>
 <div class="section">Some section</div>
 <div class="section">Some section</div>
</div>

در اینجا ما چهار بخش‌داریم اگر بخواهیم تعداد این بخش‌ها که همان صفحه‌های ما می‌باشند را بیشتر کنیم باید تعداد div را بیشتر کرد. به‌صورت پیش‌فرض اولین div فعال هست اگر بخواهید این‌که یک بخش دیگر از سایت فعال باشد کافی هست کلاس active رو نسبت بدید.

<div class="section active">Some section</div>

صفحه‌ها تا اینجا به‌صورت عمودی تغییر می‌کنند شاید بخواهیم در یک صفحه چند المنت و صفحه دیگر را جا بدهیم که به‌صورت افقی جابه‌جا شوند. باید مانند زیر عمل کرد:

<div class="section">
 <div class="slide"> Slide 1 </div>
 <div class="slide"> Slide 2 </div>
 <div class="slide"> Slide 3 </div>
 <div class="slide"> Slide 4 </div>
</div>

می‌بینید که 4 اسلاید در این بخش قراردادم. حالا می‌توانید به هر طریقی بین این اسلایدها جابه‌جا شوید. با استفاده از کیبورد و یا قرار دادن دکمه و … .

به‌وسیله دکمه‌های می‌توانیم بفهمیم که در کدام صفحه هستیم یا با کلیک کردن بر روی آن دکمه‌ها جابه‌جا شویم و به صفحه موردنظر خودمان برویم.

<ul id="menu">
  <li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
  <li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
  <li data-menuanchor="3rdPage"><a href="#3rdPage">Third slide</a></li>
  <li data-menuanchor="4thpage"><a href="#4thpage">Fourth slide</a></li>
</ul>

می‌بینید که در خاصیت href هر لینک و خاصیت data-menuanchor هر li، باید آدرس و نام قسمت مربوطه رو وارد کنیم. با این کار، با کلیک بر روی این لینک، به آن بخش منتقل میشیم. با تغییرات در css این li ها می‌توان تغییرات ایجاد کرد که اینجا بستگی به سلیقه شما دارد.

خب در اینجا ما هنوز پلاگین را فعال و معرفی نکردیم. برای این کار باید در تگ script نهایی کدهای زیر رو قرار بدیم:

$(document).ready(function() {
  $('#fullpage').fullpage({
 anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage'],
 menu: '#menu'
  });
});

برای مطالعه بیشتر به  این لینک مراجعه کنید.با تشکر

The post معرفی پلاگین جی کوئری fullPage.js appeared first on وب دیزاین.

ویژگی‌های زیر که باعث OWL Carousel شده منحصربه‌فرد باشد:

مهم نیست شما یک حرفه‌ای باشید یا مبتدی کار با این اسلاید بسیار آسان می‌باشد.

آموزش کار با OWL Carousel:

اولین قدم دانلود کردن کتابخانه OWL Carousel می‌باشد.که از اینجا دانلود کنید.

اگر هم نخواستید کتابخانه را دانلود کنید مشکلی به وجود نمی‌آید و شما می‌توانید آدرس‌دهی را از طریق سایت owl انجام دهید.

برای نصب اسلاید شو:

• دو فایل CSS را به HTML خود قبل از *.js اضافه کنید، توجه کنید که مورد دوم اختیاری است و به‌راحتی می‌توانید آن را ویرایش کنید.

<ink rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

• حال باید carousel.min.js را اضافه کنید:

<script src="owlcarousel/owl.carousel.min.js"></script>

• شما به  نشانه‌گذاری خاصی برای HTML ندارید کافی است <div class = “owl-carousel”> را صدا بزنید:

<!-- Set up your HTML -->
<div class="owl-carousel">
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
</div>

• برای آماده‌سازی و خواندن اسلاید باید با پلاگین خود ارتباط برقرار کنید پس در فایل جی کوئری خود کد زیر را وارد کنید:

$(document).ready(function(){
 $(".owl-carousel").owlCarousel();
});

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

1-گزینه‌ها:

• Item: تعداد اقلامی که می‌خواهید بر روی صفحه‌نمایش ببینید.

Type: Number

Default: 3

• Loop: حلقه بی‌نهایت.

Type: Boolean

Default: false

• touchDrag: کشیدن لمسی فعال‌شده است.

Type: Boolean

Default: true

• Autoplay: پخش خودکار.

Type: Boolean

Default: false

2-این نمونه‌ای از چگونگی ارائه HTML است. با گزینه‌های زیر می‌توانید تقریباً هر کلاس را به شیوه‌ای که می‌خواهید نحوه نمایش را تغییر دهید. گزینه‌ها:

• rtlClass: کلاس برای حالت راست به چپ.

Type: String

Default: owl-rtl

• dragClass: کلاس برای حالت کشیدن ماوس.

Type: String

Default: owl-drag

• responsiveClass: کلاس کمکی اختیاری.

Type: String|Boolean

Default: false

3-رویدادهای که توسط اسلاید قابل‌تغییر می‌باشد:

• owl.lazy: بارگذاری خاص عکس‌ها. (تنبل)

Type: attachable

Callback: onLoadLazy

• هنگامی‌که عکس‌ها کند (تنبل) بارگذاری می‌شوند.

Type: attachable

Callback: onLoadedLazy

• owl.autoplay: اجرای خودکار.

Type: triggerable

Parameter: [timeout, speed]

• owl.autoplay: توقف خودکار پخش.

Type: triggerable

خب این هم از آموزش این اسلایدشو زیبا پیشنهاد ما استفاده از این پلاگین زیبا می باشد.برای دیدن و آشنایی بیشتر وارد سایت خود OWL Carousel شوید.

The post معرفی پلاگین جی کوئری OWL Carousel appeared first on وب دیزاین.