آموزش جامع Swiper.js - اسلایدر مدرن

📚معرفی و نصب

Swiper.js قدرتمندترین و مدرن‌ترین کتابخانه اسلایدر برای وب است. بدون jQuery، Touch کامل، ۶ افکت بصری، Breakpoints و API غنی.

نصب

<!-- ۱. CSS در <head> -->
<link rel="stylesheet" href="swiper-bundle.min.css">

<!-- ۲. ساختار HTML -->
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">اسلاید ۱</div>
    <div class="swiper-slide">اسلاید ۲</div>
  </div>
</div>

<!-- ۳. JS قبل از </body> -->
<script src="swiper-bundle.min.js"></script>
<script>
  const swiper = new Swiper('.swiper', {
    loop:  true,
    speed: 500
  });
</script>

ⓘ ساختار الزامی: همیشه به ترتیب swiper ← swiper-wrapper ← swiper-slide — این ۳ کلاس برای کارکرد صحیح ضروری هستند.

🔁اسلایدر پایه

new Swiper('.swiper', {
  direction:      'horizontal', // یا 'vertical'
  loop:           true,           // حلقه بی‌نهایت
  speed:          600,            // ms سرعت انتقال
  slidesPerView:  1,              // تعداد اسلاید نمایش‌داده‌شده
  spaceBetween:   20,             // px فاصله
  centeredSlides: true,           // اسلاید فعال در وسط
  grabCursor:     true,           // cursor دست هنگام drag
  keyboard:       { enabled: true } // کنترل با کیبورد
});

🔄 دمو: اسلایدر پایه — بکشید یا از فلش‌های کیبورد استفاده کنید

اسلاید ۱

اسلاید ۲

اسلاید ۳

اسلاید ۴

اسلاید ۵

اسلایدر عمودی

↕ دمو: direction: vertical

↑ بالا

↓ پایین

↕ عمودی

🏋ناوبری و Pagination

<!-- HTML: اضافه کردن عناصر کنترلی -->
<div class="swiper">
  <div class="swiper-wrapper">...</div>
  <div class="swiper-button-prev"></div>  <!-- دکمه قبلی -->
  <div class="swiper-button-next"></div>  <!-- دکمه بعدی -->
  <div class="swiper-pagination"></div> <!-- نقاط -->
  <div class="swiper-scrollbar"></div>  <!-- اسکرول‌بار -->
</div>

new Swiper('.swiper', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  pagination: {
    el:        '.swiper-pagination',
    clickable: true,
    type:      'bullets'  // 'bullets' | 'fraction' | 'progressbar'
  },
  scrollbar: { el: '.swiper-scrollbar', draggable: true }
});

🏋 دمو: bullets | fraction | progressbar

Bullets (clickable)

🏠 خانه

❤ علاقه

⭐ محبوب

Fraction

⚙ تنظیمات

🌟 ویژه

💻 تکنولوژی

Progressbar

مرحله ۱

مرحله ۲

مرحله ۳

مرحله ۴

▶Autoplay و Loop

const swiper = new Swiper('.swiper', {
  loop: true,
  speed: 800,
  autoplay: {
    delay:                3000,  // ms توقف روی هر اسلاید
    disableOnInteraction: false, // ادامه بعد از تعامل
    pauseOnMouseEnter:    true   // توقف هنگام hover
  }
});

// کنترل از کد
swiper.autoplay.stop();
swiper.autoplay.start();
swiper.autoplay.pause();

💡 UX: همیشه pauseOnMouseEnter: true را فعال کنید تا کاربران دسکتاپ بتوانند راحت بخوانند.

▶ دمو: Autoplay — هر ۲.۵ ثانیه

⏳ ۲.۵ ثانیه

🎯 خودکار

🔄 Loop

✨ Swiper

📱Breakpoints واکنش‌گرا

new Swiper('.swiper', {
  slidesPerView: 1,     // پیش‌فرض (موبایل)
  spaceBetween:  10,
  breakpoints: {
    480:  { slidesPerView: 2, spaceBetween: 15 },
    768:  { slidesPerView: 3, spaceBetween: 20 },
    1024: { slidesPerView: 4, spaceBetween: 30 }
  }
});

📱 دمو: Multi-slide + Breakpoints

کارت ۱

کارت ۲

کارت ۳

کارت ۴

کارت ۵

کارت ۶

کارت ۷

کارت ۸

🎪افکت‌های بصری

افکت	مقدار	توضیح
slide	'slide'	پیش‌فرض — حرکت افقی/عمودی
fade	'fade'	Crossfade بین اسلایدها
cube	'cube'	چرخش مکعب سه‌بعدی
coverflow	'coverflow'	مثل iTunes Cover Flow
flip	'flip'	چرخش ۱۸۰ درجه‌ای
cards	'cards'	کارت‌های روی هم

🎖 Fade

🎖 Fade ۱

🎖 Fade ۲

🎖 Fade ۳

🎯 Cube

🎯 Cube ۱

🎯 Cube ۲

🎯 Cube ۳

🔄 Flip

🔄 Flip ۱

🔄 Flip ۲

🔄 Flip ۳

🃏 Cards

👤

علی محمدی

مهندس فرانت‌اند

👥

سارا رضایی

طراح UI/UX

👦

رضا کریمی

مدیر محصول

👧

نرگس نوری

مهندس بک‌اند

🎶Coverflow

new Swiper('.swiper', {
  effect:         'coverflow',
  grabCursor:     true,
  centeredSlides: true,
  slidesPerView:  'auto',
  coverflowEffect: {
    rotate:       50,   // زاویه چرخش
    stretch:      0,    // فاصله اضافی
    depth:        100,  // عمق سه‌بعدی
    modifier:     1,    // ضریب اعمال
    slideShadows: true  // سایه روی اسلایدها
  },
  loop: true
});

🎶 دمو: Coverflow — مثل iTunes

📅 ژانویه

📅 فوریه

📅 مارس

📅 آوریل

📅 می

📅 ژوئن

📷Thumbs Gallery

با استفاده از ماژول Thumbs می‌توان یک گالری تصویر با thumbnail ناوبری ساخت:

<!-- اسلایدر اصلی -->
<div class="swiper gallery-main">
  <div class="swiper-wrapper">...</div>
</div>

<!-- اسلایدر thumbnail -->
<div class="swiper gallery-thumbs">
  <div class="swiper-wrapper">...</div>
</div>

// JavaScript
const thumbs = new Swiper('.gallery-thumbs', {
  slidesPerView: 4,
  spaceBetween:  8,
  watchSlidesProgress: true
});

const main = new Swiper('.gallery-main', {
  thumbs: { swiper: thumbs },
  navigation: { nextEl: '...', prevEl: '...' }
});

📷 دمو: Gallery با Thumbnail

🌞 تصویر ۱

🌏 تصویر ۲

🍃 تصویر ۳

🌱 تصویر ۴

🌈 تصویر ۵

🏋 تصویر ۶

۱

۲

۳

۴

۵

۶

⚡API و رویدادها

const sw = new Swiper('.swiper', {
  // رویدادها درون options
  on: {
    slideChange: s => console.log('اسلاید:', s.activeIndex),
    reachEnd:    s => console.log('آخر!'),
    reachBeginning: s => console.log('اول!'),
    init:        s => console.log('آماده شد')
  }
});

// متدهای ناوبری
sw.slideTo(2);          // رفتن به اسلاید ۲
sw.slideNext();       // اسلاید بعدی
sw.slidePrev();       // اسلاید قبلی

// اضافه/حذف اسلاید
sw.appendSlide('<div class="swiper-slide">جدید</div>');
sw.removeSlide(0);     // حذف اسلاید ۰
sw.update();            // آپدیت بعد از تغییر DOM
sw.destroy();           // حذف و پاک‌سازی

// خواندن وضعیت
sw.activeIndex         // ایندکس اسلاید فعال
sw.slides.length        // تعداد کل اسلایدها
sw.isBeginning          // true اگر اول باشد
sw.isEnd                // true اگر آخر باشد

⚡ دمو: کنترل API + رویداد زنده

اسلاید ۱

اسلاید ۲

اسلاید ۳

اسلاید ۴

وضعیت اینجا نمایش می‌یابد...

🔥نکات حرفه‌ای

// Lazy Loading تصاویر
new Swiper('.swiper', {
  lazy: true
  // در HTML: <img class="swiper-lazy" data-src="img.jpg">
  //          <div class="swiper-lazy-preloader"></div>
});

// virtual slides — برای لیست‌های بسیار بزرگ
new Swiper('.swiper', {
  virtual: {
    slides: Array.from({length: 1000}, (_, i) => `اسلاید ${i+1}`)
  }
});

// Free Mode — بدون snap
new Swiper('.swiper', {
  freeMode: { enabled: true, sticky: false }
});

// mousewheel — اسکرول با ماوس
new Swiper('.swiper', {
  mousewheel: true
});

💡 خلاصه Swiper:

ساختار: swiper > swiper-wrapper > swiper-slide
navigation — دکمه قبلی/بعدی
pagination — bullets/fraction/progressbar
autoplay.delay — چرخش خودکار
breakpoints — تعداد اسلاید در هر سایز
effect: fade/cube/flip/coverflow/cards
thumbs — gallery با thumbnail
sw.slideTo(n) / sw.slideNext()

🚀زمین بازی کد (Playground)

یک اسلایدر Swiper بساز: ناوبری، Pagination، Autoplay و افکت‌های بصری را امتحان کن. نسخهٔ ۱۱.۰.۵ آفلاین بارگذاری می‌شود.